perf: narrow reportName selector and stabilize parentReport subscription - #94073
Conversation
|
Codex Review: Didn't find any major issues. Bravo. Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
|
@mananjadhav 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] |
| const [originalTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transaction?.comment?.originalTransactionID)}`); | ||
| const [cardList] = useOnyx(ONYXKEYS.CARD_LIST); | ||
| const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`); | ||
| const stableParentReportSelector = useCallback((reportEntry: OnyxEntry<Report>) => getStableReportSelector(reportEntry), []); |
There was a problem hiding this comment.
❌ CLEAN-REACT-PATTERNS-0 (docs)
This useCallback wrapper around getStableReportSelector is redundant. getStableReportSelector is already a stable, module-level function, and the wrapper (reportEntry) => getStableReportSelector(reportEntry) with empty deps adds no value — React Compiler is enabled and would memoize this automatically anyway. The established convention in this repo is to pass the selector directly (6 call sites do exactly this, e.g. MoneyRequestReportActionsList.tsx, ChatListItem.tsx, ReportActionItem.tsx).
Pass the selector directly and drop the useCallback (and the now-unused useCallback/OnyxEntry/Report imports if not needed elsewhere):
const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`, {selector: getStableReportSelector});Reviewed at: 2bc0212 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
|
|
||
| const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, { | ||
| selector: reportAttributesSelector, | ||
| const selectReportName = useCallback((attributes: OnyxEntry<ReportAttributesDerivedValue>) => reportNameSelector(attributes, iouReportID), [iouReportID]); |
There was a problem hiding this comment.
❌ CLEAN-REACT-PATTERNS-0 (docs)
React Compiler is enabled in this codebase and automatically memoizes closures based on their captured variables, so manually wrapping the selector in useCallback is redundant. The compiler already caches this closure keyed on iouReportID.
Define the selector inline (or as a plain const) and let the compiler handle memoization:
const [derivedReportName] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {
selector: (attributes) => reportNameSelector(attributes, iouReportID),
});Reviewed at: 2bc0212 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
There was a problem hiding this comment.
Tried inlining it first, but no-inline-useOnyx-selector fails due to contextual selectors (depending on iouReportID) must be a useCallback. So it's required here, not redundant
There was a problem hiding this comment.
@fabioh8010 Is this file not compilable with react-compiler? As we will remove the useOnyx deps, we might need to address this as well, no?
There was a problem hiding this comment.
Yes, this file is not compilable at the moment and that's why no-inline-useOnyx-selector was failing for Olimpia, so useCallback is necessary until the component is fixed to be compliant.
ff11af9 to
941589b
Compare
|
All bot comments have been addressed. Ready for review. |
|
@mananjadhav Can you take a look when you have a chance? Thanks! |
|
Currently reviewing #94188. Will start this as soon as that one is complete. |
|
@OlimpiaZurek What do you think of adding unit tests for |
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppios-report-name.moviOS: mWeb Safarimweb-safari-report-name.movMacOS: Chrome / Safariweb-report-name.mov |
Good idea. Added a few tests for |
Reviewer Checklist
|
mountiny
left a comment
There was a problem hiding this comment.
Looks good, but curious if we could get around the useCallback now already
|
|
||
| const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, { | ||
| selector: reportAttributesSelector, | ||
| const selectReportName = useCallback((attributes: OnyxEntry<ReportAttributesDerivedValue>) => reportNameSelector(attributes, iouReportID), [iouReportID]); |
There was a problem hiding this comment.
@fabioh8010 Is this file not compilable with react-compiler? As we will remove the useOnyx deps, we might need to address this as well, no?
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 cristipaval has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/cristipaval in version: 9.4.22-1 🚀
|
|
🚀 Deployed to staging by https://github.com/cristipaval in version: 9.4.24-0 🚀
|
|
🚀 Deployed to production by https://github.com/cristipaval in version: 9.4.24-0 🚀
Bundle Size Analysis (Sentry): |
|
🚀 Deployed to staging by https://github.com/cristipaval in version: 9.4.24-0 🚀
|
Explanation of Change
This PR reduces unnecessary re-renders in the expense report preview subtree with two scoped Onyx subscriptions:
MoneyRequestReportPreviewContent- theREPORT_ATTRIBUTESsubscription selected the entirereportsmap; it now selects only this report'sreportName(via areportNameSelectorfactory inselectors/Attributes.ts), so it re-emits only when this report's name changes.TransactionPreviewContent— theparentReportsubscription resolves to the chat report and re-emitted on every message sent/read; it now usesgetStableReportSelectorto strip thelast*heartbeat fields. Its only consumer readsstateNum/statusNum/ownerAccountID, all preserved by the selector.Fixed Issues
$ #93771
PROPOSAL:
Tests
Offline tests
QA Steps
Same as tests
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand 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: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari