Coming from here
Background
The BaseSelectionList component is a critical UI component used throughout the Expensify app for rendering searchable lists of selectable items like reports, users or policies.
Profiling shows severe slowdowns when rendering large datasets. The main culprit is excessive re-renders triggered by unstable object references and unnecessary state updates. In particular, flattenedSections variable performs heavy computations and is invoked 8 times, with each call averaging ~200ms.
Problem
When users open screens with SelectionList component containing large amount of options (e.g. Start chat), then frequent re-renders and repeated flattenedSections calculations occur, which creates performance bottlenecks and slows down screen access.
Solution
Implement stable array reference for selectedItems prop by using CONST.EMPTY_ARRAY to prevent unnecessary re-renders when no items are selected. This avoids creating a new array on each render, which previously caused React to detect a prop change even when the content was identical.
Additionally, convert the itemHeights from state to ref, since it’s only used for layout calculations and doesn’t need to trigger re-renders.
These changes preserve functionality while eliminating unnecessary render cycles, reducing BaseSelectionList render time on iOS (24k options, “Start chat” screen) from ~1.6s to ~200ms.
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~021967572861427133429
- Upwork Job ID: 1967572861427133429
- Last Price Increase: 2025-09-15
Issue Owner
Current Issue Owner: @strepanier03
Coming from here
Background
The BaseSelectionList component is a critical UI component used throughout the Expensify app for rendering searchable lists of selectable items like reports, users or policies.
Profiling shows severe slowdowns when rendering large datasets. The main culprit is excessive re-renders triggered by unstable object references and unnecessary state updates. In particular, flattenedSections variable performs heavy computations and is invoked 8 times, with each call averaging ~200ms.
Problem
When users open screens with SelectionList component containing large amount of options (e.g. Start chat), then frequent re-renders and repeated flattenedSections calculations occur, which creates performance bottlenecks and slows down screen access.
Solution
Implement stable array reference for selectedItems prop by using CONST.EMPTY_ARRAY to prevent unnecessary re-renders when no items are selected. This avoids creating a new array on each render, which previously caused React to detect a prop change even when the content was identical.
Additionally, convert the itemHeights from state to ref, since it’s only used for layout calculations and doesn’t need to trigger re-renders.
These changes preserve functionality while eliminating unnecessary render cycles, reducing BaseSelectionList render time on iOS (24k options, “Start chat” screen) from ~1.6s to ~200ms.
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @strepanier03