Virtual Scrolling to improve performance of options

[dtraft]

For very long lists of options, enable virtual scrolling to minimize the number of elements actually rendered to the DOM. This will improve performance by determining the scroll position of the menu and loading elements in or close to the visible options. Additional options are dynamically rendered when the user scrolls up or down.

To enable this, use the virtualScroll option. This utilizes the react-virtualized VirtualScroll component. Use virtualScrollProps to pass options directly to that component. virtualScrollProps default value is set to match the default styling of the Select component.

[bvaughn]

react-virtualized author here. Firstly, this is a cool PR to see. I love the idea of integration windowing into components like react-select.

Haven't read through the PR yet, other than a glance, but wanted to suggest that you might consider using a CDN for react-virtualized to minimize the footprint of this PR and avoid forking:

• UMD build: https://npmcdn.com/[email protected]/dist/umd/react-virtualized.js
• CSS: https://npmcdn.com/[email protected]/styles.css

My time is somewhat limited at the moment- (I'm going through the process of buying a house)- but if I can help in ways that don't require too much of a time investment, let me know. :)

[cloudkite]

@bvaughn, @dtraft have you had a look a #763? IMHO seems like a more general solution which doesn't force any extra dependencies directly on react-select.

[bvaughn]

@cloudkite No I had not seen that. I agree that looks like a better approach. Then myself (or anyone) could release a separate library that exports a menuComponent built with react-virtualized. I'd be happy to help with that.

[bvaughn]

@cloudkite I played with the PR in #763 a bit this evening to see if I could create a component that connects react-virtualized and react-select, but I don't think the pending PR is sufficient. For instance, it creates the full children array before passing them to the customMenu component. A library like react-virtualized needs to manage which children get created and when. The PR also seems to have some broken parts (missing files, syntax errors).

I'd be willing to contribute a PR that abstracts away the child-creation and menu-rendering if there's sufficient interest.

[dtraft]

@cloudkite +1, I agree that a more general approach and the increased flexibility would be awesome. I'll try to take a look at #763 and it can be modified to accommodate a customMenu component build with react-select.

[bvaughn]

@dtraft: If you are looking for a more flexible approach that could support windowing of data, we'd need a way to defer creation of children via a factory function or something similar. Creating all N children up front is probably a big chunk of why things are currently slow.

I'm still willing to lend a hand too if it looks like there's enough momentum on this front to get the feature merged. :)

[bvaughn]

Hi all. :) I took a little initiative this evening and created a fork of react-select with react-virtualized integrated.

• Demo: https://rawgit.com/bvaughn/react-select/demo/examples/dist/index.html
• Source: https://github.com/bvaughn/react-select

The main difference between this fork and the approach I tried in my fork was that I used AutoSizer for the inner VirtualScroll rather than requiring an explicit width/height. That's kind of nice for convenience but it makes testing a bit more difficult. (See here.)

Anyway, this approach works great if @JedWatson wants a direct connection between react-select and react-virtualized. If that isn't the case, (and I kind of imagine it isn't), then I think the approach proposed in PR #763 might be a better direction. For user-convenience, I'd be happy to release and maintain an adapter library that sits between react-select and react-virtualized for users who want to enable virtualization. (I've already reserved an NPM package for this purpose in fact.)

[bvaughn]

Update: I changed my approach as described in this comment and this comment. Increasingly confident that the best way to go is the direction outlined in discussion on #763.

[vgoklani]

This is awesome!!! Thanks Brian 👍

[bvaughn]

FYI I went ahead and submitted a PR with the approach I outlined for easier discussion purposes ~ #859

[bvaughn]

Fwiw I also released a HOC to make the integration between the 2 libraries easier: https://github.com/bvaughn/react-virtualized-select/

[agirton]

Since this can be handled with @bvaughn react-virtualized-select going to close this out.

[ItayTur]

is there an updated solution for react-select with virtualization ? since, react-virtualized-select is no longer supported