fix: selfDMReportID getting undefined, when user tries track manual expense first time with own email #76315
Conversation
…xpense first time with own email
melvin-bot
bot
requested review from
abdulrahuman5196
and removed request for
a team
|
@abdulrahuman5196 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
melvin-bot
bot
requested review from
trjExpensify
and removed request for
a team
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
| const selfDMReportID = useMemo(() => findSelfDMReportID(), []); | ||
| const [selfDMReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${selfDMReportID}`, {canBeMissing: true}); | ||
| const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); |
There was a problem hiding this comment.
❌ PERF-4 (docs)
Subscribing to the entire ONYXKEYS.COLLECTION.REPORT collection causes this component to re-render whenever ANY report in Onyx changes. This can be thousands of reports, leading to significant performance degradation. The reports object is also passed to the trackExpense callback, causing the callback to be recreated on every report change.
Suggested fix: Instead of subscribing to all reports, consider:
- Using a selector to only subscribe to the self DM report:
useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: (reports) => findSelfDMReportID() ? reports[\${ONYXKEYS.COLLECTION.REPORT}${findSelfDMReportID()}`] : undefined})` - Or ensuring the self DM report is created before this component mounts
- Or using a derived key that only updates when the self DM report changes
| // More information can be found here: https://github.com/Expensify/App/issues/73728 | ||
| Navigation.setNavigationActionToMicrotaskQueue(() => { | ||
| Navigation.navigate(iouConfirmationPageRoute); | ||
| }); |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The reports dependency in this callback causes trackExpense to be recreated whenever ANY report changes in Onyx. This is extremely expensive as it can trigger re-renders in any component that uses this callback.
Suggested fix: Instead of depending on the entire reports collection, memoize only the specific self DM report data you need:
const selfDMReportData = useMemo(() => {
const selfDMReportID = findSelfDMReportID();
return selfDMReportID ? reports?.[`${ONYXKEYS.COLLECTION.REPORT}${selfDMReportID}`] : undefined;
}, [reports]);Then use selfDMReportData in the callback dependencies instead of reports.
There was a problem hiding this comment.
@abdulrahuman5196 github-actions is suggesting similar to the first approach of my proposal. should i go with this approach?
There was a problem hiding this comment.
@Burhan-Rashid Could you fix the https://github.com/Expensify/App/pull/76315/files#r2572802828 comment? I think once that is fixed this might go away.
There was a problem hiding this comment.
fixed that. Using selector now to get the selfDMReport.
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
2 participants
Explanation of Change
Fixed Issues
$#75721
PROPOSAL:#75721 (comment)
Tests
Offline tests
same as tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
android.native.mp4
Android: mWeb Chrome
android.web.mp4
iOS: Native
ios.native.mp4
iOS: mWeb Safari
ios.web.mp4
MacOS: Chrome / Safari
mac.os.web.mp4