Skip to content

Fix performance issue caused by InteractionManager being called for each report #74567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mountiny merged 1 commit into from
Nov 10, 2025
Merged

Fix performance issue caused by InteractionManager being called for each report #74567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/libs/ReportUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
import mapValues from 'lodash/mapValues';
import lodashMaxBy from 'lodash/maxBy';
import type {ColorValue} from 'react-native';
import {InteractionManager} from 'react-native';
import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
import Onyx from 'react-native-onyx';
import type {SvgProps} from 'react-native-svg';
Expand Down Expand Up @@ -951,7 +950,7 @@
conciergeReportID = value;
},
});

Check warning on line 953 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
const defaultAvatarBuildingIconTestID = 'SvgDefaultAvatarBuilding Icon';
Onyx.connect({
key: ONYXKEYS.SESSION,
Expand All @@ -959,7 +958,7 @@
// When signed out, val is undefined
if (!value) {
return;
}

Check warning on line 961 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function

currentUserEmail = value.email;
currentUserAccountID = value.accountID;
Expand All @@ -977,7 +976,7 @@
if (currentUserAccountID) {
currentUserPersonalDetails = value?.[currentUserAccountID] ?? undefined;
}
allPersonalDetails = value ?? {};

Check warning on line 979 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
allPersonalDetailLogins = Object.values(allPersonalDetails).map((personalDetail) => personalDetail?.login ?? '');
},
});
Expand All @@ -989,14 +988,14 @@
callback: (value) => (allReportsDraft = value),
});

let allPolicies: OnyxCollection<Policy>;

Check warning on line 991 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
Onyx.connect({
key: ONYXKEYS.COLLECTION.POLICY,
waitForCollectionCallback: true,
callback: (value) => (allPolicies = value),
});

let allReports: OnyxCollection<Report>;

Check warning on line 998 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
let reportsByPolicyID: ReportByPolicyMap;
Onyx.connect({
key: ONYXKEYS.COLLECTION.REPORT,
Expand All @@ -1004,7 +1003,7 @@
callback: (value) => {
allReports = value;

if (!value) {

Check warning on line 1006 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
return;
}

Expand All @@ -1013,10 +1012,7 @@
return acc;
}

// eslint-disable-next-line @typescript-eslint/no-deprecated
InteractionManager.runAfterInteractions(() => {
handlePreexistingReport(report);
});
handlePreexistingReport(report);

// Get all reports, which are the ones that are:
// - Owned by the same user
Expand Down Expand Up @@ -1045,14 +1041,14 @@
});

let allTransactions: OnyxCollection<Transaction> = {};
let reportsTransactions: Record<string, Transaction[]> = {};

Check warning on line 1044 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
Onyx.connect({
key: ONYXKEYS.COLLECTION.TRANSACTION,
waitForCollectionCallback: true,
callback: (value) => {
if (!value) {
return;
}

Check warning on line 1051 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
allTransactions = Object.fromEntries(Object.entries(value).filter(([, transaction]) => transaction));

reportsTransactions = Object.values(value).reduce<Record<string, Transaction[]>>((all, transaction) => {
Expand All @@ -1078,7 +1074,7 @@
callback: (actions) => {
if (!actions) {
return;
}

Check warning on line 1077 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
allReportActions = actions;
},
});
Expand All @@ -1091,7 +1087,7 @@
callback: (value) => {
if (!value) {
return;
}

Check warning on line 1090 in src/libs/ReportUtils.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
allReportMetadata = value;

Object.entries(value).forEach(([reportID, reportMetadata]) => {
Expand Down
79 changes: 41 additions & 38 deletions src/libs/actions/Report.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1864,49 +1864,52 @@ function handlePreexistingReport(report: Report) {
return;
}

// It is possible that we optimistically created a DM/group-DM for a set of users for which a report already exists.
// In this case, the API will let us know by returning a preexistingReportID.
// We should clear out the optimistically created report and re-route the user to the preexisting report.
let callback = () => {
const existingReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${preexistingReportID}`];

Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, null);
Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${preexistingReportID}`, {
...report,
reportID: preexistingReportID,
preexistingReportID: null,
// Replacing the existing report's participants to avoid duplicates
participants: existingReport?.participants ?? report.participants,
});
Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, null);
};
// Only re-route them if they are still looking at the optimistically created report
if (Navigation.getActiveRoute().includes(`/r/${reportID}`)) {
const currCallback = callback;
callback = () => {
currCallback();
Navigation.setParams({reportID: preexistingReportID.toString()});
// eslint-disable-next-line @typescript-eslint/no-deprecated
InteractionManager.runAfterInteractions(() => {
// It is possible that we optimistically created a DM/group-DM for a set of users for which a report already exists.
// In this case, the API will let us know by returning a preexistingReportID.
// We should clear out the optimistically created report and re-route the user to the preexisting report.
let callback = () => {
const existingReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${preexistingReportID}`];

Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, null);
Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${preexistingReportID}`, {
...report,
reportID: preexistingReportID,
preexistingReportID: null,
// Replacing the existing report's participants to avoid duplicates
participants: existingReport?.participants ?? report.participants,
});
Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, null);
};
// Only re-route them if they are still looking at the optimistically created report
if (Navigation.getActiveRoute().includes(`/r/${reportID}`)) {
const currCallback = callback;
callback = () => {
currCallback();
Navigation.setParams({reportID: preexistingReportID.toString()});
};

// The report screen will listen to this event and transfer the draft comment to the existing report
// This will allow the newest draft comment to be transferred to the existing report
DeviceEventEmitter.emit(`switchToPreExistingReport_${reportID}`, {
preexistingReportID,
callback,
});
// The report screen will listen to this event and transfer the draft comment to the existing report
// This will allow the newest draft comment to be transferred to the existing report
DeviceEventEmitter.emit(`switchToPreExistingReport_${reportID}`, {
preexistingReportID,
callback,
});

return;
}
return;
}

// In case the user is not on the report screen, we will transfer the report draft comment directly to the existing report
// after that clear the optimistically created report
const draftReportComment = allReportDraftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`];
if (!draftReportComment) {
callback();
return;
}
// In case the user is not on the report screen, we will transfer the report draft comment directly to the existing report
// after that clear the optimistically created report
const draftReportComment = allReportDraftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`];
if (!draftReportComment) {
callback();
return;
}

saveReportDraftComment(preexistingReportID, draftReportComment, callback);
saveReportDraftComment(preexistingReportID, draftReportComment, callback);
});
}

/** Deletes a comment from the report, basically sets it as empty string */
Expand Down
Loading