React-select: Virtual scrolling to improve performance of Options

Created on 15 Feb 2016 · 8Comments · Source: JedWatson/react-select

There are some issues opened about react-select performance, when it is used with a lot of options.
Main problem is simply that it renders a

for each option, even if you have more than 500 options (In my case I have more than 2000 options).

The best solution would be to use the "virtual scrolling" (sometimes called "buffered scrolling"): it's the technique used for large Data Tables.
It practically renders only a part of the options (50 of them for example), while it simulates all the others with one large and empty

(so that the vertical scrollbar is always consistent).

You can find a complete explanation of the concept here:
http://datatables.net/blog/2011-06-11

It would be awesome to have it in react-select!

Source

gabrielenosso

👍3

Most helpful comment

I was going to create a new ticket for this but I'll just mention it here. The README file in this project references the new menuRenderer option, as well as @bvaughn's react-virtualized library, but does not mention react-virtualized-select. I think it would be better to mention the latter, otherwise people may end up recreating what @bvaughn has already done.

By the way, react-virtualized is awesome!

jakeboone02 on 29 Apr 2016

👍3

All 8 comments

+1.
I have 4k elements on the list and Select works 2-3 times slower than jQuery chosen...

jk171505 on 16 Feb 2016

😄1

+1 I have 9K elements and it needs 2 secs to open up.
For lists I'm using https://github.com/bvaughn/react-virtualized

ahoiin on 23 Feb 2016

+1 I have 2K elements and while it does open, there is noticeable delay. Great component over all though!

dtraft on 1 Mar 2016

FYI folks, I've added this support in PR #859. Let's hope it gets merged. :)

bvaughn on 31 Mar 2016

Update: If you're able to use react-select 1.0.0 beta, then you might be interested in trying a new HOC, react-virtualized-select. Does windowing/lazy rendering so it should help with the issue you're reporting.

bvaughn on 3 Apr 2016

By the way, react-virtualized is awesome!

jakeboone02 on 29 Apr 2016

👍3

Thanks @jakeboone02. Good suggestion on the README. I had considered updating that but then I must have forgotten. I'll post a PR. :)

Edit: Posted as PR #925

bvaughn on 29 Apr 2016

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.