React-select: Wasted time

[ayozebarrera]

Hi

Using react performance tools (Perf) and capturing the action of clicking the select (to display list) gives me this table (shouldn't be anything on that table).

It means that Select wasted time rerendering 303 items that didn't change from the first render.
I have 303 options on the list btw ^^

[JedWatson]

Looks like we should implement shouldComponentUpdate to improve that...

[ayozebarrera]

Yes please.. It gets even worst when we hover options.. just clicking and hovering ONE option (without clicking!) gives me 900 instances (the 303 before + 600 on the hover).

If you want another screenshot tell me! hope you can improve this

[bruderstein]

This is something I'd like to address in #396 - we need to split up the component (at work we've also got a 100 or so options, and we see a visible lag), but I think (other than some possible quick wins with the Option.shouldComponentUpdate) we can do much more with a split up component, and assuming options is immutable.

[acontreras89]

Assuming immutable options would make it impossible to add new options _on the fly_, wouldn't it?
Hope I'm wrong..

[bruderstein]

No not at all, it just means that we would only check that newProps.options !== this.props.options, rather than JSON.stringify both and compare the strings, which is obviously much slower. To add options on the fly, you just have to ensure that the object reference changes. So, rather than optionsArray.push(...), you'd need to create a new array: [].concat(optionsArray, [newOption]). You can achieve this really easily with a library like immutable.js.

[acontreras89]

Yeah :sweat_smile: realized how silly my question was when I had already submitted it :stuck_out_tongue: I'm sorry

[bruderstein]

No worries :wink:

[Agamennon]

yup this is biting me too, i have 1000 options that i prefetch for the select, and it's too slow for usage, any suggested hacks?

[JedWatson]

I'll try and make some time for this tomorrow, unfortunately no promises as it's a busy week.

Thinking about this further there's probably no real value in rendering 1k options, regardless of how well optimised the component is. Scrolling through that many is _never_ going to be a good user experience.

@Agamennon in terms of hacks, why don't you try implementing asyncOptions to limit the results with the search string? It would mean a much faster render, until we handle this better internally.

(asyncOptions doesn't mean there has to be any delay or any actual async process, just have a look at the example on the demo page and get rid of the setTimeout). You could check out sifter by @brianreavis to filter down the options)

[johankj]

There is visible lag in Firefox with only a few dozen options, when scrolling with the mouse hovered over one of the options.
Hopefully this would help reducing the lag.

[ayozebarrera]

I'm having the same issue with hovering the options.

[timbrandin]

Same issue here, rendering too much to often when scrolling.

[bvaughn]

Late to the party, but for anyone coming across this issue in the future- here are 2 add-ons you can use to dramatically speed up performance:

• react-virtualized-select: Uses react-virtualized to render large options lists efficiently.
• react-select-fast-filter-options: Uses js-search to create an optimized search index for options, making options filtering very fast. This filter function is also more configurable in terms of the types of matching it supports than the default filterOptions prop.

[OAGr]

Also late to the party, but for me search was taking a long time (around 140ms per keystroke with around 5k elements). Apparently the vast majority of this time was spent in the stripDiacritics function, which can be bypassed by using the ignoreAccents = false option. This gave me a gigantic speed boost to search and hovering.

On a side note, I'd also want to thank everyone who worked on this library. I'm very impressed by how much configuration there is in it and how modular it is. Definitely one of the most modular and clean libs I've come across so far, kudos.

[seanlindo]

@bvaughn I immediately used the react-virtualized-select HOC and love it. Whereas with a certain Angularjs library I was performing async searching after 3 characters, now users can browse and filter the entire options collection. It sounds like a small thing, but I think it really helps when you aren't sure what you're searching for!

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples