react-aria-components Select performance issues
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
We have a virtualized select with many items that is slow to load. If the select is in a dialog the issue is more apparent (opening the dialog is slowed down by the select with many items)
This heppens immediately upon load and not when the options are presented.
Looking into the code I _think_ this is cause the children are first given to the CollectionBuilder, which blocks rendering until the collection is built.
### 🤔 Expected Behavior?
Selects render quickly
### 😯 Current Behavior
Selects render slow the more items they have in them
### 💁 Possible Solution
Do the work more lazily so the select trigger can render
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
Have a select with many options
### Version
1.10.1
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
Mac
### 🧢 Your Company/Team
Snowflake
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the react-aria-components Select and its CollectionBuilder path, then reproduce the slowdown with many options in Chrome, especially when the Select is inside a dialog. Done means the Select trigger renders promptly instead of waiting for the full collection to build, while the options remain available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100