[CP Staging] Re-fire search on Spend tab focus after cache clear by MelvinBot · Pull Request #88994 · Expensify/App

MelvinBot · 2026-04-27T20:19:28Z

Explanation of Change

After PR #85234 introduced a bottom TabNavigator with freezeOnBlur: true, the Search/Spend screen stays mounted across tab switches. When the user does "Clear cache and restart", Onyx.clear() wipes all snapshot data, but the useEffect in useSearchPageSetup that fires search() does not re-run because its deps (hash, isOffline, shouldUseLiveData, queryJSON) haven't changed. The skeleton loading state persists forever since no new search() call is made.

This PR extracts the search-firing logic into a useCallback and adds a useFocusEffect so that when the Spend tab regains focus after a cache clear, search() is re-fired if the snapshot data is missing.

Fixed Issues

$ #88961
PROPOSAL: #88961 (comment)

Tests

Go to Spend > All expenses.
Go to Account > Troubleshoot > Clear cache and restart > Reset and refresh.
Quickly go to Spend tab.

Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Screen.Recording.2026-04-27.at.3.47.56.PM.mov

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

The TabNavigator introduced in #85234 keeps the Search screen mounted with freezeOnBlur. After "Clear cache and restart", Onyx snapshot data is wiped but the useEffect deps [hash, isOffline, shouldUseLiveData, queryJSON] don't change, so search() never re-fires. Adding a useFocusEffect ensures search() runs when the tab regains focus and data is missing. Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

Move ref assignments into useEffect to avoid accessing refs during render, which violates React rules and breaks React Compiler. Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-27T20:26:18Z

Fixed the React Compiler compliance failure: moved ref assignments from render phase into useEffect in useSearchPageSetup, since writing to refs during render violates React rules ("Cannot access refs during render").

luacmartins · 2026-04-27T20:33:14Z

@MelvinBot don't change anything else, just add the useFocus callback. Additionally, remove any refs added in this PR

Per review feedback: restore the original inline useEffect for firing search (without refs), and add a separate useFocusEffect callback to re-fire search when the Spend tab regains focus after cache clear. Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-27T20:40:42Z

Done — removed all refs and their sync useEffect, restored the original inline useEffect for firing search (matching main), and added a useFocusEffect callback (fireSearchOnFocus) to re-fire search when the tab regains focus after cache clear.

The fireSearchOnFocus callback included currentSearchResults, currentSearchKey, and shouldCalculateTotals in its useCallback deps. When search() fires and updates currentSearchResults via Onyx, the callback identity changes, causing useFocusEffect to re-run while focused — creating an infinite loop that exhausts JS heap memory. Use refs (synced via useEffect) for these values so the callback can read them without depending on them, matching the pattern of the existing useEffect that intentionally omits these deps. Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-27T21:14:45Z

Fixed the failing test (job 8) check — tests/ui/SearchPageTest.tsx was OOM-ing due to an infinite loop.

The fireSearchOnFocus callback had currentSearchResults, currentSearchKey, and shouldCalculateTotals in its useCallback deps. When search() fires it updates currentSearchResults via Onyx → callback identity changes → useFocusEffect re-runs → infinite loop. Used refs (synced via useEffect) so the callback can read these values without depending on them, matching the existing useEffect pattern.

MelvinBot · 2026-04-27T21:20:32Z

The typecheck failure is unrelated to this PR.

This PR only modifies src/hooks/useSearchPageSetup.ts, but the error is in src/pages/iou/request/step/IOURequestStepUpgrade.tsx:137 — a missing policyTagList property in a call matching ChangeTransactionsReportProps. This is a pre-existing issue on main.

The only other failing check is checklist (PR Author Checklist), which is expected.

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-27T21:41:29Z

Fixed the failing Prettier check: added a missing semicolon in src/hooks/useSearchPageSetup.ts.

MelvinBot · 2026-04-27T21:52:48Z

The failing typecheck check is unrelated to this PR.

Analysis: The error is in IOURequestStepUpgrade.tsx at the changeTransactionsReport() call site, which is missing the required policyTagList property. This was introduced by #78995 (merged into main ~30 min before this PR's checks ran). Main's typecheck hasn't re-run since that merge, so the error hasn't been caught there yet.

Evidence: This PR only modifies src/hooks/useSearchPageSetup.ts and does not touch IOURequestStepUpgrade.tsx or Transaction.ts. The checklist failure is on the ignore list (PR Author Checklist).

The fix for this typecheck error belongs in a follow-up to #78995, not in this PR. Re-running CI after that fix lands on main should make this check pass.

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-27T22:30:39Z

Both failing checks are unrelated to this PR's changes (only src/hooks/useSearchPageSetup.ts was modified):

typecheck — Failed because policyTagList was missing from a changeTransactionsReport call in IOURequestStepUpgrade.tsx. This was a pre-existing issue on main that was fixed by [No QA] Fix typecheck #88999 (merged at 22:19 UTC, after this PR's CI ran at 21:42 UTC).
test (job 8) — SessionTest.tsx timed out and SearchPageTest.tsx hit an OOM crash. Both are flaky infrastructure issues, not related to this PR.

Pushed an empty commit to trigger a fresh CI run against the updated main which includes the typecheck fix.

…loop The inline function passed to useFocusEffect created a new reference on every render, causing the effect to re-fire continuously (render → search → Onyx update → re-render → new callback → search again), leading to OOM in SearchPageTest. Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-28T00:17:23Z

Fixed the failing test (job 8) check — tests/ui/SearchPageTest.tsx was OOMing due to an infinite render loop.

Root cause: The useFocusEffect callback on line 58 was an inline function (not wrapped in useCallback), so every render created a new reference → useFocusEffect re-ran → search() triggered an Onyx update → re-render → repeat → OOM.

Fix: Wrapped the callback in useCallback with appropriate dependencies, matching the existing pattern used by clearOnHashChange on line 37.

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-28T00:40:01Z

Fixed the failing React Compiler Compliance check: removed an unnecessary eslint-disable-next-line react-hooks/exhaustive-deps comment in src/hooks/useSearchPageSetup.ts. The disable was causing the React Compiler to skip optimizing the component (regression from main). ESLint passes without it since all deps in the useFocusEffect callback are already listed.

…n SearchPageTest The useEffect that fires search() had currentSearchResults added to its dependency array, creating an infinite loop: search() updates results in Onyx, which triggers the effect again. Also guard the useFocusEffect search() call with isSearchDataLoaded so it only re-fires when data is actually missing (e.g. after cache clear). Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-28T01:13:47Z

Fixed the failing test (job 8) check. The SearchPageTest.tsx was crashing with an OOM due to an infinite loop:

currentSearchResults was added to the useEffect deps array (line 56), but the original code intentionally excluded it — search() updates results in Onyx → triggers the effect → calls search() again → infinite loop
The new useFocusEffect called search() unconditionally without checking if data was already loaded

Fix: Restored the original deps array [hash, isOffline, shouldUseLiveData, queryJSON] and added an isSearchDataLoaded guard to the useFocusEffect so it only re-fires search() when snapshot data is actually missing (the cache-clear scenario).

MelvinBot · 2026-04-28T01:14:54Z

⚠️ MelvinBot CI Fix Loop Detected

MelvinBot has made 5 consecutive commits trying to fix CI failures. Automatic CI fix dispatches are now paused for this PR.

Next steps: A human should review the recent commits and resolve the conflicting CI errors manually.

codecov · 2026-04-28T01:21:46Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/hooks/useSearchPageSetup.ts	`100.00% <100.00%> (ø)`
... and 517 files with indirect coverage changes

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

MelvinBot · 2026-04-28T17:40:57Z

Fixed the failing Prettier check: ran prettier on src/hooks/useSearchPageSetup.ts (dependency array formatting).

daledah · 2026-04-29T14:38:21Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

android-mweb.mov

Android: mWeb Chrome

android-mweb.mov

iOS: HybridApp

ios.mov

iOS: mWeb Safari

ios-mweb.mov

MacOS: Chrome / Safari

web.mov

MelvinBot · 2026-04-29T15:34:52Z

The verifySignedCommits check failure is unrelated to this PR — it's a transient GitHub infrastructure error (GnuTLS recv error (-24): Decryption has failed) during git fetch, which failed on all 3 retry attempts.

Evidence: The error occurs in the actions/checkout step before any PR code is evaluated. No code change can fix this.

Fix: Re-run the failed verifySignedCommits job. I attempted to re-run it but lack the required approval — please re-run it manually from the Actions tab.

MelvinBot · 2026-04-29T15:36:22Z

The verifySignedCommits failure is unrelated to this PR's code changes — it's a transient GitHub infrastructure error (GnuTLS recv error (-24): Decryption has failed during git fetch). The CI runner failed to clone the repo after 3 retries.

Action needed: Re-run the verifySignedCommits check. I wasn't able to re-trigger it automatically (requires approval), so please re-run it manually from the Actions tab.

JS00001 · 2026-04-29T16:04:20Z

-    }, []);
+    });
+
+    useFocusEffect(() => {


Is this focus effect needed? Looking at the initial useEffect, wouldn't the issue be solved by adding isSnapshotDataLoaded, isSnapshotSearchLoading to the useEffect deps? Since those depend on the data, so if its missing, the effect will run again?

OSBotify · 2026-04-29T16:38:46Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

…adAfterReset [CP Staging] Re-fire search on Spend tab focus after cache clear (cherry picked from commit b77d56b) (cherry-picked to staging by arosiclair)

github-actions · 2026-04-29T17:31:06Z

🚧 @luacmartins has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-04-29T17:47:46Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #88994.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-b77d56b-4edc34e-c97b0b01aa953a3d306fa1594a6233e2354d1c2a/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-b77d56b-4edc34e-76164b69ccf9a4f072001ce2da66cd6d6a0f6e49/index.html

Web 🕸️
https://88994.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-04-29T17:52:01Z

🚀 Cherry-picked to staging by https://github.com/arosiclair in version: 9.3.64-18 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

MelvinBot · 2026-04-29T17:53:16Z

I reviewed the changes in this PR. It modifies internal React hook logic in useSearchPageSetup.ts to fix an infinite loading state on the Spend tab after "Clear cache and restart." The changes are:

Extracting derived primitives (isSnapshotDataLoaded, isSnapshotSearchLoading) so effects don't depend on the whole snapshot object
Switching openSearch() from useEffect to useFocusEffect so it re-fires on tab focus
Adjusting effect dependencies to properly re-trigger search() when snapshot data is missing after a cache clear

These are purely internal bug fixes with no user-facing feature changes, no new UI elements, no renamed settings/tabs/buttons, and no workflow changes.

No help site documentation changes are required.

MelvinBot assigned luacmartins Apr 27, 2026

MelvinBot requested a review from a team April 27, 2026 20:19

MelvinBot mentioned this pull request Apr 27, 2026

Spend - Spend tab loads infinitely after reset app #88961

Open

7 tasks

Fix React Compiler compliance in useSearchPageSetup

3a6e642

Move ref assignments into useEffect to avoid accessing refs during render, which violates React rules and breaks React Compiler. Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

luacmartins and others added 2 commits April 27, 2026 15:39

use focus effect

b709492

Fix: Add missing semicolon to pass Prettier check

7ca89bb

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

Trigger CI re-run (typecheck fix merged to main via #88999)

09e2dd3

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

Remove unnecessary eslint-disable to fix React Compiler compliance

a5c59ce

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

luacmartins mentioned this pull request Apr 28, 2026

Spend tab: re-fire search on focus after cache clear (PR #88994) #89095

Closed

luacmartins and others added 2 commits April 28, 2026 11:38

make hook react compiler friendly

e0d0b56

Fix: run prettier on useSearchPageSetup.ts

c3189da

Co-authored-by: Carlos Martins <luacmartins@users.noreply.github.com>

luacmartins requested a review from daledah April 29, 2026 14:35

dry code

1804ea8

luacmartins dismissed joekaufmanexpensify’s stale review via 1804ea8 April 29, 2026 14:35

daledah reviewed Apr 29, 2026

View reviewed changes

Comment thread src/hooks/useSearchPageSetup.ts

rm callback, fix disable rule

be637ab

daledah approved these changes Apr 29, 2026

View reviewed changes

github-actions Bot reviewed Apr 29, 2026

View reviewed changes

Comment thread src/hooks/useSearchPageSetup.ts

github-actions Bot reviewed Apr 29, 2026

View reviewed changes

Comment thread src/hooks/useSearchPageSetup.ts Outdated

github-actions Bot reviewed Apr 29, 2026

View reviewed changes

Comment thread src/hooks/useSearchPageSetup.ts Outdated

github-actions Bot reviewed Apr 29, 2026

View reviewed changes

Comment thread src/hooks/useSearchPageSetup.ts Outdated

JS00001 requested changes Apr 29, 2026

View reviewed changes

luacmartins added 2 commits April 29, 2026 10:11

rm focus effect

9491429

add comments

e4970f8

JS00001 approved these changes Apr 29, 2026

View reviewed changes

luacmartins requested a review from JS00001 April 29, 2026 16:14

JS00001 approved these changes Apr 29, 2026

View reviewed changes

luacmartins merged commit b77d56b into main Apr 29, 2026
42 checks passed

luacmartins deleted the claude-fixSpendTabInfiniteLoadAfterReset branch April 29, 2026 16:28

OSBotify added the CP Staging marks PRs that have been CP'd to staging label Apr 29, 2026

OSBotify mentioned this pull request Apr 29, 2026

Deploy Checklist: New Expensify 2026-04-23 #88633

Open

arosiclair mentioned this pull request Apr 29, 2026

PR checklist #89226

Open

Conversation

MelvinBot commented Apr 27, 2026 • edited by luacmartins Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

MelvinBot commented Apr 27, 2026

Uh oh!

luacmartins commented Apr 27, 2026

Uh oh!

MelvinBot commented Apr 27, 2026

Uh oh!

MelvinBot commented Apr 27, 2026

Uh oh!

MelvinBot commented Apr 27, 2026

Uh oh!

MelvinBot commented Apr 27, 2026

Uh oh!

MelvinBot commented Apr 27, 2026

Uh oh!

MelvinBot commented Apr 27, 2026

Uh oh!

MelvinBot commented Apr 28, 2026

Uh oh!

MelvinBot commented Apr 28, 2026

Uh oh!

MelvinBot commented Apr 28, 2026

Uh oh!

MelvinBot commented Apr 28, 2026

Uh oh!

codecov Bot commented Apr 28, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

MelvinBot commented Apr 28, 2026

Uh oh!

daledah commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

Uh oh!

MelvinBot commented Apr 29, 2026

Uh oh!

MelvinBot commented Apr 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JS00001 Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

luacmartins Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

OSBotify commented Apr 29, 2026

Uh oh!

github-actions Bot commented Apr 29, 2026

Uh oh!

github-actions Bot commented Apr 29, 2026

Uh oh!

OSBotify commented Apr 29, 2026

Uh oh!

MelvinBot commented Apr 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

MelvinBot commented Apr 27, 2026 •

edited by luacmartins

Loading

codecov Bot commented Apr 28, 2026 •

edited by github-actions Bot

Loading

daledah commented Apr 29, 2026 •

edited

Loading