adobe / adobe/react-spectrum

react-aria-components Select performance issues

Open
#8,722 9 comments 1 reaction 0 assignees View on GitHub
performance
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.