React-autosuggest: Causing delay in rendering huge list of results. (over 500 suggestions)

[NikhilMutkekar]

Until results are rendered, user cannot type any further letters. How do i handle suggestion matches over 500 values?

[moroshko]

Could you create a Codepen that demonstrates the issue?

[autohub7]

I have the same issue with a large data (about 850,000 items). Compiling has never finished with it.

[NikhilMutkekar]

http://codepen.io/nikhilmutkekar/pen/dWjMJd Here is the issue. Type on 'C' and holds up a little before it renders list of suggestions.

[osala-netquest]

It's normal, even you are using react-autosuggest or any other library. Browser takes its time to render large lists. Although there are some techniques in order to keep a fast rendering time that are not still used in this repo, but I think they are coming soon -> #330

@autohub7 IMO 850,000 is too much data for the browser even you are not rendering it. You should add some pagination or something similar if you can.

[austinh]

I am often having this keyboard input value lag issue with as little 100 results. Its not as noticable as the 850,000 items above, but it's definitely a performance problem. When typing a vague string like "the" (which will be matched by lots of things in my list), the rendering of the suggestions is slow, and the input box text does not update until finishing rendering. It would be nice if the event to update the input value did not wait until react finished rendering. They should be independent.

Here is some debugging in Chrome devtools:

[zachgibson]

I’m currently dealing with 1,639 items in my suggestions and @moroshko’s suggestion to slice, https://github.com/moroshko/react-autosuggest/issues/292#issuecomment-261177321, improved performance a lot.