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

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]

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]

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}
    />
  )
}