Combobox for Solid is much slower than React?

[dryu]

This problem might have more to do with Zag.js than Ark UI, but since I don't have Zag.js-specific examples, and since the core team members are the same between projects, posting it here.

I've been working on a custom Combobox implementation in Solid, and with large enough items in the ComboboxContent children, I'm observing significant performance penalty in Solid implementation for it - and we are not talking about lots of items, I only have like 200+ items for a country selector, and I'm already observing a penalty, with Ark seemingly recalculating all of the children every time I hover on content items, all the time.

That problem, however, is much less pronounced in React version of the same component - React is just several times faster in recalculating its content items.

To visualize the problem, I've prepared two examples:

Solid example: https://stackblitz.com/edit/5pea4dyk?file=src%2FApp.tsx
This is the standard example from Ark UI docs, with modified initialItems set to 3000 items (if your computer is fast, you might need to do more to better visualize the problem).

React example: https://stackblitz.com/edit/864g847c?file=src%2FApp.tsx
This is also. the standard example from Ark UI docs, with modified items collection set to 3000 items.

If you open dropdowns in both controls and just hover around, you'll notice that React combobox is much snappier in general, while Solid's is sluggish (increase the number of items in collections if you don't feel the difference).

While this problem can be mitigated with virtualization, I'm generally perplexed why would the performance difference be so vast, and with React clearly doing better than Solid.

The problem also can be especially visible if you use a form library, like Tanstack form, where every keypress in unrelated form input forces it to recalculate quickly all controls - if I have my country selector control in the form, it will be recalculated with a very poor performance in every keystroke, resulting in a singificantly worse UX.

Is this something that can be addressed, or is it an inherit limitation of Solid implementation?

[segunadebayo]

Looked into this and it seems related to the <For> and <Index> components in Solid.js, and how they recompute the underlying signals.

If you switch the <For> to <Key> from @solid-primitives/keyed , it's significantly faster.

import { Key } from '@solid-primitives/keyed'

and switch the rendering to

              <Key each={collection().items} by={(item) => item}>
                {(item) => (
                  <Combobox.Item item={item()}>
                    <Combobox.ItemText>{item()}</Combobox.ItemText>
                    <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                  </Combobox.Item>
                )}
              </Key>

[dryu]

Thanks for looking into this @segunadebayo! I've tried to apply your recommendation, but even with Key, the performance is the same as with For or Index, I don't observe any improvements at all.

I've updated the example with your suggestion: https://stackblitz.com/edit/5pea4dyk?file=src%2FApp.tsx

[segunadebayo]

I would swear that I tested it yesterday, and it appeared faster in Chrome. Hehe

After digging in a bit more, I found this version to be slightly quicker.

I smells like something to do with the reactive context or the Dynamic component in Solid.js

[dryu]

It is indeed a bit quicker, thank you.

[segunadebayo]

Please explore other options, like

• Setting limit on the useListCollection hook for list truncation
• Using virtualization via tanstack/solid-virtual
• Consider lazy mounting via the lazyMount and unmountOnExit

[dryu]

Ok, virtualization helped, thanks!