primitives
primitives copied to clipboard
radix-ui
Select component blocking/slowing renders
Bug report
Current Behavior
Expected behavior
Select component should not block/slows renders.
Reproducible example
Additional context
I recently find out that the Select component slows/blocks renders if it has more items "than usual". In the CodeSandbox example the component is rendering 500 items to evidence the behavior, but this starts to happen with 90+ (approx) items. I've tried to resolve this with memo, but the "block" behavior still happens.
I don't know if this happens because the component is generating a "shadow" native select to control values and selected items, but I didn't notice this same behavior happening with other components, like Dropdown and Popover. I know these components are not doing the same thing, but I put in the example just to compare.
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | @radix-ui/react-select | 2.0.0 |
| React | n/a | 18.2.0 |
| Browser | Chrome | 120.0.6099.72 64 bits |
| Node | n/a | 20.9.0 |
| npm/yarn | npm | 9.8.1 |
| Operating System | Windows | 10 |
+1 i am suffering this issue too
It's so crucial for our application performance that i should use another lib only for Select.
The custom Select has a lot more work to do than the native one to bring in the same functionality.
Arguably, if you have that many items, a select probably is the wrong UI/UX anyway as it's painful for a user to scroll through hundreds of items.
A combobox in these cases would make more sense, or some filtering mechanism that allows to whittle down options.
