extract useParticipantSubmission hook#87979
extract useParticipantSubmission hook#87979OlimpiaZurek wants to merge 3 commits intoExpensify:mainfrom
Conversation
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
melvin-bot
Bot
requested review from
flaviadefaria and
marcaaron
and removed request for
a team
|
@marcaaron 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] |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e2df4745fa
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
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".
| const currentUserPersonalDetails = useCurrentUserPersonalDetails(); | ||
| const {policyForMovingExpenses} = usePolicyForMovingExpenses(); | ||
| const [draftTransactions] = useOptimisticDraftTransactions(initialTransaction); | ||
| const transactionIDs = draftTransactions?.map((transaction) => transaction.transactionID); |
There was a problem hiding this comment.
transactionIDs is recomputed as a new array on every render and then fed into useTransactionsByID, whose selector is memoized on the transactionIDs reference; this makes the selector dependency change each render and triggers unnecessary resubscribe/reselect churn during participant-step interactions (e.g., typing/search updates). The previous implementation intentionally memoized IDs to avoid this hot-path overhead, so this regression can hurt the performance this refactor is trying to improve.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
The useOptimisticDraftTransactions hook is compiled by React Compiler, so draftTransactions only gets a new reference on actual Onyx writes to COLLECTION.TRANSACTION_DRAFT . useTransactionsByID is also compiled with transactionsSelector cached on transactionIDs. On the participants step, the hot path is search (updates RAM_ONLY_IS_SEARCHING_FOR_REPORTS, not COLLECTION.TRANSACTION_DRAFT), so transactionIDs stays stable during search
There was a problem hiding this comment.
NAB, not sure if it is worth adding some kind of code comment to that effect, maybe it can silence future false positives from the AI reviews.
There was a problem hiding this comment.
Added a comment explaining why no explicit memoization is needed
|
No new product considerations - removing my assignment and unsubscribing. |
|
If this requires C+, I can review |
| const currentUserPersonalDetails = useCurrentUserPersonalDetails(); | ||
| const {policyForMovingExpenses} = usePolicyForMovingExpenses(); | ||
| const [draftTransactions] = useOptimisticDraftTransactions(initialTransaction); | ||
| const transactionIDs = draftTransactions?.map((transaction) => transaction.transactionID); |
There was a problem hiding this comment.
NAB, not sure if it is worth adding some kind of code comment to that effect, maybe it can silence future false positives from the AI reviews.
| currentUserPersonalDetails: userDetails, | ||
| introSelected: intro, | ||
| participants: currentParticipants, | ||
| initialTransaction: txn, |
There was a problem hiding this comment.
I think per style guides we generally don't abbreviate things like this so txn would be transaction, t would be translate, etc.
| } | ||
| }; | ||
|
|
||
| const goToNextStep = (_value?: string, _participants?: Participant[]) => { |
There was a problem hiding this comment.
NAB, I know this was pulled in from elsewhere but curious about the underscores. _participants at least seems like it is used so not sure why flagged as not used.
There was a problem hiding this comment.
Renamed since it is used
| // When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, redirect the user to the starting step of the flow. | ||
| // This is because until the expense is saved, the receipt file is only stored in the browsers memory as a blob:// and if the browser is refreshed, then | ||
| // the image ceases to exist. The best way for the user to recover from this is to start over from the start of the expense process. | ||
| // skip this in case user is moving the transaction as the receipt path will be valid in that case |
There was a problem hiding this comment.
question: Why was this comment removed?
| const currentSelfDMReportID = dataRef.current.selfDMReportID; | ||
| const shouldUpdateTransactionReportID = currentParticipants?.at(0)?.reportID !== newReportID; | ||
| const transactionReportID = newReportID === currentSelfDMReportID ? CONST.REPORT.UNREPORTED_REPORT_ID : newReportID; | ||
| // TODO: probably should also change participants here for selectedParticipants.current, but out of scope of this PR |
There was a problem hiding this comment.
NAB for this as we just moved it - but wondering if this is worth cleaning up now cc @koko57
There was a problem hiding this comment.
Addressed by introducing effectiveParticipants = nextParticipants ?? currentParticipants so isPolicyExpenseChat, setSplitShares, and shouldUpdateTransactionReportID use the freshest data.
FYI @koko57 is no longer on the project.
OlimpiaZurek
force-pushed
the
perf/extract-useParticipantSubmission-hook
branch
from
e2df474 to
03fd77b
Compare
4 participants
Explanation of Change
Part of the ongoing IOURequestStepConfirmation decomposition, aimed at improving the create expense flow performance.
Extracts submission logic from
IOURequestStepParticipantsinto auseParticipantSubmissionhook, and fixes all React Compiler violations so the hook is fully memoized.What was extracted
IOURequestStepParticipants was 491 lines. The bulk of it was submission callbacks (
trackExpense,addParticipant,goToNextStep) that each maintained their own Onyx subscriptions inline, along with awaitForKeyboardDismisshelper and adataRefpattern to keep callback identities stable. The component now sits at 160 lines — route params, header title derivation, and JSX.The new useParticipantSubmission hook owns all of this: Onyx subscriptions, the dataRef pattern, and the three callbacks. It returns only {addParticipant, goToNextStep}.
Fixed Issues
$ #87959
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