Input filtering is laggy for large lists of options on v1.0.0-beta10

[janraasch]

Hi there, first of all, thank you for this beautiful React component.

Now, here's the problem with it ;)))

I have an options list with about 2000 items, e.g.

const options = Array.apply(0, Array(2000)).map(function (_i, i) { return i; }).map((i) => ({ 
  value: ('my_value_numero_' + i), label: ('MyLabelStart - (Numero ' + i + ')')
}))

Then, simply render the Select component via

function onChange(values) {
  console.log('Not even doing anything')
}

ReactDOM.render(<Select
  multi=true
  value={[]}
  options={options}
  onChange={onChange} 
/>, domNode)

Typing something into the input feels very laggy on v1.0.0-beta10. On v0.9.1 it is fine.

It is really quiet significant of a difference. v0.9.1 is really smooth, while v1.0.0-beta10 is laggy.

(If you need an actual production example I can sent you my data via e-mail, but I tried to construct data good enough to reproduce the problem above.)

[bvaughn]

Check out PR #859 (and the demo linked) which adds react-virtualized support.

[bvaughn]

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]

Chiming in after some time.

I think this problem (slow filtering) comes down to how filtering is done within react-select (aka synchronously, in the UI thread. For large lists, this approach is going to hurt FPS.

I've created some JS search libs (eg js-worker-search, redux-search) that manage filtering in web-workers, using data structures optimized for fast look-up, and the response time for filtering drop-down lists using them is very fast.

Perhaps that would be interest in trying to integrate one of these libs with react-select? Perhaps even as an external HOC (similar to react-select-virtualized) that just exported a filterOptions function that could be passed as a prop to override the built-in react-select filter.

If there's interest, I would be happy to take a stab at it. Let me know!

[bvaughn]

To add a little more context...

I like using high-order components for this sort of functionality because (a) it doesn't bloat or add complexity to the underlying library (react-select) and (b) it lets users opt-in if they need the functionality. Lots of users just want a simple, styled drop-down menu and vanilla react-select works fine for that.

I was tentatively thinking of creating another light-weight lib that connects js-worker-search and react-select so people wanting to filter large lists of options could use that library as their filterOptions property. So basically something like this...

import React from 'react'
import VirtualizedSelect from 'react-virtualized-select'
import fastFilterOptions from 'react-select-fast-filter-options'

function MyComponent () {
  return (
    <VirtualizedSelect
      {...props}
      filterOptions={fastFilterOptions}
    />
  )
}

[janraasch]

Thanks for the advice. I will try that.

Still, I thought this might be an interesting performance degradation to look at, since the problem is not present on v0.9.1, but only on the v1-beta.

[bvaughn]

New high-order component available to hopefully speed things up a lot!

Demo available here with 100,000 options: https://bvaughn.github.io/react-select-fast-filter-options/

Source and installation instructions here: https://github.com/bvaughn/react-select-fast-filter-options

[bvaughn]

Going to close this issue since react-select-fast-filter-options provides a lightweight way to improve filtering performance. I briefly considered making it the default filterOptions implementation within react-select (and may still at some point) but didn't want to pull in the extra dependency on js-search for users with small options lists and simpler use-cases.

I've added a new section to the README making mention of this new library. Since I own react-select-fast-filter-options and js-search and I'm a collaborator on react-select as well- it should be easy to keep these libraries in sync going forward.