JedWatson / JedWatson/react-select
Select is slow to render with many selected options
Open
Nobody has claimed this yet.
issue/bug-unconfirmed
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
React select is slow to render and slows down other UI elements if it has many selected options.
Reproduction:
- https://codesandbox.io/s/react-select-v5-sandbox-forked-b9dgvl?file=/example.js
- If you toggle "Toggle other content" button, div appears ant disappears fast.
- Clicking "Toggle select" already renders slow when Select appears.
- Now clicking on "Toggle other content" is also slow.
- You can observe it getting faster/slower depending on items count by changing ITEM_COUNT in code
Of course 5000 is not what real world app would have, but it emphasizes how long multiple renders can take.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked CodeSandbox reproduction and inspect example.js, especially the render behavior with different ITEM_COUNT values. Compare the Toggle select and Toggle other content interactions before and after the change; done means rendering remains responsive with many selected options.
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
- Mostly clear
- Newbie friendliness
- 35/100