Slow performance using Select with Combobox

[lessp]

Current behavior

Hello there, and thanks for the library!

I'm experiencing performance issues when using a list that contains more than e.g. 10 items.

Linked are two simple examples, one is using Ariakit, and one is using react-select. If you search for a country, and then delete your query there's a delay from when the input is cleared until all the results show up in the list again.

Ariakit

ariakit.mov

https://stackblitz.com/edit/stackblitz-starters-aezh16?file=src%2FApp.tsx

React Select

react-select.mov

https://stackblitz.com/edit/stackblitz-starters-q6d7kq?file=src%2FApp.js

Steps to reproduce the bug

Search for a country, and then delete your query. You should experience a delay from when the input is cleared until all the results show up in the list again.

https://stackblitz.com/edit/stackblitz-starters-aezh16?file=src%2FApp.tsx

Expected behavior

There should be no significant delay.

Workaround

No response

Possible solutions

No response

[christianalares]

I'm experiencing the same issue

[georgekaran]

Hey @lessp, thanks for reporting the issue.

This is a known limitation when the item's size are too big. To resolve this, we recommend using virtualization. Here is an official example you can use: https://ariakit.org/examples/select-combobox-virtualized.

Could you please try this and let us know if it works for you?

[lessp]

Hey @lessp, thanks for reporting the issue.

This is a known limitation when the item's size are too big. To resolve this, we recommend using virtualization. Here is an official example you can use: https://ariakit.org/examples/select-combobox-virtualized.

Could you please try this and let us know if it works for you?

Hey @georgekaran,

thanks for the quick reply, and for sharing the example. That works. 🙂

FWIW, I did come across a bug using the virtualised list. If you search for something, then remove your query you end up only seeing a partial list until you scroll again. See:

Screen.Recording.2024-02-07.at.17.35.09.mov

[diegohaz]

SelectRenderer is still experimental, much like any other component imported directly from @ariakit/react-core. I'm planning to work on it for a stable release soon.

Meantime, I've seen people successfully using react-virtua.

[patrikholcak]

I don’t want to be the "any news?" guy, but I’m currently experiencing the same issue as OP. Tried react-virtua but couldn’t get it to scroll to the active option and it didn’t seem much more performant.

What’s interesting is SelectRenderer has worse performance on comboboxes than selects.

References:
#3294
https://stackblitz.com/edit/github-vjvhs5?file=src%2FApp.tsx,package.json

[diegohaz]

What’s interesting is SelectRenderer has worse performance on comboboxes than selects.

Could you expand on that?

[patrikholcak]

I’m currently migrating Reakit to Ariakit and wanted to use the Select component instead of our own bodged Popover/List.

I included as much code relevant tu our usage (things like rendering in a reakit portal) as I could, so you can see exactly how we use the components. I can also make a more minimal example if needed.

https://stackblitz.com/edit/github-vjvhs5-arp3zf?file=src%2FApp.tsx%3AL49

[diegohaz]

I’m currently migrating Reakit to Ariakit and wanted to use the Select component instead of our own bodged Popover/List.

I included as much code relevant tu our usage (things like rendering in a reakit portal) as I could, so you can see exactly how we use the components. I can also make a more minimal example if needed.

https://stackblitz.com/edit/github-vjvhs5-arp3zf?file=src%2FApp.tsx%3AL49

I'm still not quite sure what the problem is. It's expected that using either Combobox or Select independently would offer better performance than using them together. However, I didn't notice any significant difference in your example.

Could you provide more details about what specifically I should be looking into?

Edit: I notice a difference when I throttle the CPU to 6x. I'm going to look into it.

[patrikholcak]

Thank you for looking into this on a weekend.

Yup, I’m also not noticing it as much on M1, but if I go back to my Intel mac or throttle the CPU, I can see the items render much more slowly when combining select with combobox. That is why I set the overscan to 8, which was a sweet spot.

My goal is to make the select component automatically switch to select/combo when a certain number of items is passed. And virtualise the list when it has > n items