fix: debounce autocomplete query to prevent JS thread freeze on mobil…#85797
fix: debounce autocomplete query to prevent JS thread freeze on mobil…#85797rafaelafonso wants to merge 2 commits intoExpensify:mainfrom
Conversation
|
@aimane-chnaif 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
joekaufmanexpensify
and removed request for
a team
|
All contributors have signed the CLA ✍️ ✅ |
|
Note: I was unable to capture platform-specific screenshots due to a |
|
I have read the CLA Document and I hereby sign the CLA |
![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: 86a8388f9e
ℹ️ 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 recentReportsOptions = (() => { | ||
| if (autocompleteQueryValue.trim() === '') { | ||
| if (debouncedAutocompleteQueryValue.trim() === '') { |
There was a problem hiding this comment.
useDebouncedValue() starts out as undefined on the first render (src/hooks/useDebouncedValue.ts:12-18), so this new debouncedAutocompleteQueryValue.trim() call runs before the debounce timer has populated a string. Opening the search router now throws Cannot read properties of undefined (reading 'trim') on mount, which crashes the autocomplete list for both empty and prefilled queries until the value is guarded or defaulted to ''.
Useful? React with 👍 / 👎.
|
No product review needed |
@rafaelafonso you can simply dismiss console error. It's not blocker 
|
|
Your code is completely wrong. The issue happens in SearchRouter, not SearchAutoCompleteList SearchRouter: SearchAutoCompleteList: |
|
As per contributing guidelines: 
As a new contributor, if you're not able to test all platforms, we'll need to reassign. |
3 participants
…e search (#83207)
Explanation of Change
autocompleteQueryValueinSearchAutocompleteList.tsxupdates immediately on every keystroke, triggering expensive synchronous re-computation ofgetSearchOptions(),combineOrderingOfReportsAndPersonalDetails(), and multiple filter chains on the JS thread. On mobile devices, this freezes the JS thread — native gestures still work but all JS-driven interactions become unresponsive.This PR makes three targeted changes:
Debounce the autocomplete query value: Uses Expensify's existing
useDebouncedValuehook with a 150ms delay so filtering runs at most ~7 times/second instead of on every keystroke.Memoize
searchOptions: Converts the IIFE touseMemowith stable dependencies, preventing redundant recomputations when unrelated state changes trigger re-renders.Use debounced value for heavy operations:
getSearchOptions(),getQueryWithoutFilters(), andcombineOrderingOfReportsAndPersonalDetails()all use the debounced value, while lightweight operations (focus management, autocomplete suggestions, highlight detection) keep using the immediate value for UI responsiveness.Fixed Issues
$ #83207
PROPOSAL: #83207 (comment)
Tests
Offline tests
QA Steps
Same as Tests above. The key validation is that typing in the Inbox search no longer freezes the JS thread on mobile devices.
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
Unable to fully test visually due to a
No data found for key nvp_onboardingerror in the local dev environment that blocks login. The code change is minimal and scoped (debouncing + memoization only inSearchAutocompleteList.tsx), and the app compiles successfully with no errors. Happy to provide screenshots once this environment issue is resolved, or if a reviewer can validate on their end.Android: mWeb Chrome
Unable to fully test visually due to a
No data found for key nvp_onboardingerror in the local dev environment that blocks login. The code change is minimal and scoped (debouncing + memoization only inSearchAutocompleteList.tsx), and the app compiles successfully with no errors. Happy to provide screenshots once this environment issue is resolved, or if a reviewer can validate on their end.iOS: Native
Unable to fully test visually due to a
No data found for key nvp_onboardingerror in the local dev environment that blocks login. The code change is minimal and scoped (debouncing + memoization only inSearchAutocompleteList.tsx), and the app compiles successfully with no errors. Happy to provide screenshots once this environment issue is resolved, or if a reviewer can validate on their end.iOS: mWeb Safari
Unable to fully test visually due to a
No data found for key nvp_onboardingerror in the local dev environment that blocks login. The code change is minimal and scoped (debouncing + memoization only inSearchAutocompleteList.tsx), and the app compiles successfully with no errors. Happy to provide screenshots once this environment issue is resolved, or if a reviewer can validate on their end.MacOS: Chrome / Safari
Unable to fully test visually due to a
No data found for key nvp_onboardingerror in the local dev environment that blocks login. The code change is minimal and scoped (debouncing + memoization only inSearchAutocompleteList.tsx), and the app compiles successfully with no errors. Happy to provide screenshots once this environment issue is resolved, or if a reviewer can validate on their end.