React-select is slow when you have more than 1000 items

Low performance on large sets of options

React-select slows down when you have a huge array of data. Mouse

FPS drops so low on mouseover, that i can barely use it. In my real case, where i have 1010 items, which i need to show(and i can’t load them as user types) - i cannot do anything at all.

You can find a simple example in codesandbox.

https://codesandbox.io/s/q8l6xnvz7w

[Violation] 'mouseover' handler took 346ms
[Violation] 'mouseover' handler took 184ms
[Violation] 'mouseover' handler took 197ms
[Violation] 'mouseover' handler took 172ms
[Violation] 'mouseover' handler took 161ms
[Violation] 'mouseover' handler took 150ms
[Violation] 'mouseover' handler took 167ms
[Violation] 'mouseover' handler took 172ms
[Violation] 'mouseover' handler took 156ms
[Violation] 'mouseover' handler took 166ms

React-select version: 2.1.0

[M1K3Yio]

Two things to look into that may help with your issues, we also had some issues regarding large lists.

filterOption={createFilter({ignoreAccents: false})}

Take a look at this reported bug https://github.com/JedWatson/react-select/issues/2850

There’s two examples using React-Window, which greatly improves the performance.

https://codesandbox.io/s/lxv7omv65l

[johnnyreilly]

If it’s the typing lag that you’re bumping on (I was) then it’s actually the filterOption={createFilter({ignoreAccents: false})} suggestion by @M1K3Yio that’s the gem.

Using this massively reduces the lag when you’re typing into the select. I’ve got a sandbox here that illustrates: https://codesandbox.io/s/zn70lqp31m?fontsize=14

And I’ve blogged it too