[Feature Request] Optimize AutoCompelete and Select components for large options.

[I-am-abdulazeez]

Is your feature request related to a problem? Please describe.

First of all, nice library. I would say I have been following this library before its birth. I love the way Vuesax looks, so I was looking for something similar in the React world. You came at the right time. Nice work once again!

I have about 270,000+ options while using the Autocomplete component. Before you call me crazy, I'm only fetching the data when the user inputs a search query. Again, I'm not crazy. I'm using debounce from Lodash, and every good stuff that will make it work right. But, it is too slow. i mean very slow.

Describe the solution you'd like

I would suggest making it efficient like react-select, I tried using it, but I did not get how to merge both. I wanted to have the functionalities of it + next UI beautiful Autocomplete component.

I don't mind if someone could provide an example

Describe alternatives you've considered

react-select

Screenshots or Videos

No response

[linear]

ENG-871 [Feature Request] Optimize AutoCompelete and Select components for large options.

[wingkwong]

does this help?

[matteogilioli]

does this help?

Async is still slow because it makes API calls, you could implement virtualization with react-window somehow.

[LPSebi]

any updates?

[radu-torro]

i'm also interested

[pacoorozco]

I'm interested too... I'm generating an AutoComplete with 1200 items and it's very, very slow.

[vinroger]

Hi @wingkwong, I am interested to take this and improve the time complexity for searching the options. Can I take this? Thank you!

[wingkwong]

@vinroger assigned. please research a bit if react-aria has done something for the optimisation first.

[vinroger]

@wingkwong

Upon profiling, I discovered that the delay in the autocomplete feature is primarily due to the rendering of the DOM for the React component list, as there is currently no virtualization implemented.
*The actual search processing takes minimal time (approximately 2-3 ms).

^ Multiple react dom function call (creating 1000 list items) -> amounting to total ~26 seconds for 1000 items

^ One call to search the autocomplete result -> 2-3ms

Hence, I am considering to add list virtualization to fix this.

For the list virtualization, I discovered that the virtualizer component in react-aria is currently marked as unstable, as indicated in their Storybook documentation:

https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/stories/ListBox.stories.tsx

Would you be open to considering the use of an alternative, stable virtualizer library, such as react-window?

Thank you! looking forward to your response :)

[LPSebi]

(Just an Addition)
If a third party library is considered, please view tanstack virtual as a viable option

https://tanstack.com/virtual/latest

[vinroger]

Hi @wingkwong, let me know if I could proceed with react-window Link to npm package,

if yes I will submit the PR soon :)
Thanks!

[wingkwong]

For the list virtualization, I discovered that the virtualizer component in react-aria is currently marked as unstable,

do you know why they marked as unstable? and what does it mean exactly?

Would you be open to considering the use of an alternative, stable virtualizer library, such as react-window?

I think better stick to RA implementation instead of third party one.

[vinroger]

Hi @wingkwong,

Based on their release note on July 2024, the virtualizer component is "unstable" and they mentioned that it is not intended for public use.

Link to RA release notes: https://react-spectrum.adobe.com/releases/2024-07-22.html

"We are also working on bringing virtualization support to React Aria Components, which is available as an unstable API in this version."

Here is a screenshot from the webpage:

There is no mention of virtualizer update ever since. July 2024 was their second latest release.

With this being said, should we still go with the virtualizer from react-aria, or should we consider alternative library?

After deciding on this, I will submit the PR as soon as possible.

Thank you - appreciate your help! :)

[vinroger]

Hi @wingkwong, I have opened a PR for this issue :)

#4000

[matteogilioli]

@jrgarciadev Does the Select component also work with isVirtualized after this PR? From the docs, it doesn't look like it.