Problem
UserSelectPopup.tsx currently uses the useOptionsList hook from OptionListContextProvider, which causes unnecessary background recalculations on every personal details or reports change.
This is part of a larger effort to remove OptionListContextProvider entirely. See parent issue #82193 for full context.
Solution
Replace useOptionsList with useFilteredOptions following the pattern established in PR #74071 (NewChatPage migration).
Current usage:
- Properties used:
options only
- Called with: no arguments
- File:
src/components/Search/FilterDropdowns/UserSelectPopup.tsx
How options are used:
options.reports and options.personalDetails are passed to getValidOptions() to build the user filter list
- Output drives
filterAndOrderOptions and list rendering
- No loading/initialization checks are used (assumes options are always ready)
Migration steps:
- Replace
import {useOptionsList} from '@components/OptionListContextProvider' with import useFilteredOptions from '@hooks/useFilteredOptions'
- Replace
useOptionsList() call with useFilteredOptions({ enabled: true })
- Since only
options is used, handle the null case (when isLoading is true) -- either show a loading state or default to empty arrays
- Update
getValidOptions() call to use the new options shape
Complexity: Simple
Reference PR: #74071
Tests
- Verify the User Select popup in search filter dropdowns works correctly
- Verify user filtering and selection works
- Verify no errors appear in the JS console
- Test on all platforms (iOS, Android, Web, Desktop)
Problem
UserSelectPopup.tsxcurrently uses theuseOptionsListhook fromOptionListContextProvider, which causes unnecessary background recalculations on every personal details or reports change.This is part of a larger effort to remove
OptionListContextProviderentirely. See parent issue #82193 for full context.Solution
Replace
useOptionsListwithuseFilteredOptionsfollowing the pattern established in PR #74071 (NewChatPage migration).Current usage:
optionsonlysrc/components/Search/FilterDropdowns/UserSelectPopup.tsxHow options are used:
options.reportsandoptions.personalDetailsare passed togetValidOptions()to build the user filter listfilterAndOrderOptionsand list renderingMigration steps:
import {useOptionsList} from '@components/OptionListContextProvider'withimport useFilteredOptions from '@hooks/useFilteredOptions'useOptionsList()call withuseFilteredOptions({ enabled: true })optionsis used, handle thenullcase (whenisLoadingis true) -- either show a loading state or default to empty arraysgetValidOptions()call to use the new options shapeComplexity: Simple
Reference PR: #74071
Tests