Reduce redundant Onyx subscriptions in SearchPage#83602
Reduce redundant Onyx subscriptions in SearchPage#83602luacmartins merged 1 commit intoExpensify:mainfrom
Conversation
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
bd29ddf to
c2d8331
Compare
src/pages/Search/SearchPage.tsx
Outdated
|
|
||
| return ( | ||
| <Animated.View style={[styles.flex1]}> | ||
| <SearchFilterSync queryJSON={queryJSON} /> |
There was a problem hiding this comment.
Do we need this call in SearchPage? Can we move this to SearchFiltersBar instead? I think that component is always rendered whenever we're on a valid query
There was a problem hiding this comment.
Yeah, as low as it makes sense. Filters were all different since I started here.
There was a problem hiding this comment.
Yea, I think we can remove it from SearchPage and centralize it in SearchFiltersBar. We should test for any adverse side effects though
| * and syncs them to the advanced filters form whenever the query changes. | ||
| * Extracted from SearchPage to isolate re-renders caused by these subscriptions. | ||
| */ | ||
| function SearchFilterSync({queryJSON}: SearchFilterSyncProps) { |
There was a problem hiding this comment.
Do we need this component? Can we just delegate the sync to SearchFiltersBar which already subscribed to the useFilterFormValues hook?
There was a problem hiding this comment.
if it has to access all of these internal state variables (onyx), it could do it yes. can we decouple the Filters component from these subscriptions though or do you think that's not possible?
There was a problem hiding this comment.
I think we can move this logic to the SearchFiltersBar only, so we don't need this separate component here
There was a problem hiding this comment.
That way we'll rerender filters though on all internal subs of this hook
|
@codex review |
|
Codex Review: Didn't find any major issues. Keep them coming! ℹ️ 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". |
|
Conflicts @adhorodyski |
|
PR doesn’t need product input as a performance PR. Unassigning and unsubscribing myself. |
| const {isOffline} = useNetwork(); | ||
| const personalDetails = usePersonalDetails(); | ||
| const filterFormValues = useFilterFormValues(queryJSON); | ||
| useSearchFilterSync(filterFormValues); |
There was a problem hiding this comment.
@luacmartins went with a named hook for clarity, thanks for the advice
|
Updated the PR with latest |
|
FYI prettier does not give me any diff after running locally (even without the experimental flag). I cannot fix this CI issue yet, will try syncing with main. |
|
working on these new conflicts |
Move filter sync from SearchPage into a useSearchFilterSync hook called from SearchFiltersBar (which already computes filterFormValues), avoiding duplicate useFilterFormValues subscriptions. Also tighten useReceiptScanDrop to use an Onyx selector for POLICY collection instead of subscribing to the full map. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
873273a to
b7addc4
Compare
|
@suneox this is because over time this PR got more and more reduced from its original shape 😅 I'd still propose merging it, though the only solid improvement is a selector in |
|
Much smaller PR now, see the updated body. cc @luacmartins |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / Safari |
suneox
left a comment
There was a problem hiding this comment.
The filter issue has been fixed — the current change set LGTM
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @luacmartins 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/luacmartins in version: 9.3.28-0 🚀
|
|
Deploy Blocker #83951 was identified to be related to this PR. |
|
@mitarachim did you mean #81883? |
|
@luacmartins Sorry , tester just confirm issue found while checking PR #83602 , I also update details in this issue #83951 . |
|
@luacmartins ok looks like it's indeed more tangled with the rest of the app, should we simply lift this component up the tree? I don't like doubling the subscriptions, but it is completely renderless so there's little harm in that. Or, we revert it completely. |
|
Yea, I'm cool with lifting the subscription up the tree |
…ition The filter sync hook was moved to useSearchFiltersBar in Expensify#83602, which introduced a race condition where inline filter changes get wiped by the sync hook before Navigation.setParams fires (deferred by Modal.close()). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
🚀 Deployed to staging by https://github.com/luacmartins in version: 9.3.30-0 🚀
|
|
🚀 Deployed to production by https://github.com/blimpich in version: 9.3.30-3 🚀
|

@rlinoz @mountiny @luacmartins
Explanation of Change
useFilterFormValues+updateAdvancedFilters) out ofSearchPageinto auseSearchFilterSynchook called fromSearchFiltersBar, which already computesfilterFormValues— eliminates ~6 duplicate Onyx subscriptionsuseReceiptScanDropfor the POLICY collection, returning a boolean instead of subscribing to the full policy mapFixed Issues
$ #77174
PROPOSAL:
Tests
Offline tests
N/A
QA Steps
Same as tests
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