react-spectrum
react-spectrum copied to clipboard
adobe
ComboBox/Select easily becames laggy
Provide your feedback here.
When the ComboBox or Select component have a bit more items, they easily become laggy, because the full list re-renders on a single item hover. This makes them not scale well with data. It's not the case with the standalone ListBox however, rendering is optimized in that. Only when it belongs to a ComboBox or Select. The rendering behavior can be observed by turning on the React DevTools "highlight updates" feature.
🔦 Context
No response
💻 Code Sample
No response
Version
No response
What browsers are you seeing the problem on?
No response
If other, please specify
No response
What operating system are you using?
No response
Is this RAC Combobox or RSP Combobox? Could you provide a codesandbox showing a reproduction?
It's all RAC (therefore, RSP too). I don't think a codesandbox example is needed, because it's reproducible on the documentation website. Rendering the full list on hover is a problem in itself.
The below captures can be reproduced with opening React's DevTools and enabling the "Hightlight updates when components render" option.
Here's the rendering behavior of the ComboBox (captured on the RSP page, but applies to RAC too):
Whereas the standalone ListBox is optimised:
It does become noticeably laggy with my phone area code selector with little flags in each item, but again, I don't think it's needed to demonstrate actual lagginess (or I might create one a few weeks later, as I'm too busy now), because the root cause is obviously unoptimised rendering, which is observable on the docs pages.
Ah I see, I believe this is the same issue or a similar issue to something we had worked on a while ago here: https://github.com/adobe/react-spectrum/pull/2059 where we were rerendering everything due to non-memoed state objects and how we pass it down via context + every cell/row rerendering when the tracked selectionManager.focusedKey updates. We abandoned that change because it was a potential breaking change if users were relying on those extra rerenders somehow. We could try looking back into it but that would still probably be a blocking factor...
As of now, are you seeing noticeable lag due to a large unvirtualized set of data in the RAC Combobox/Select? Or is this still an issue in the virtualized RSP ComboBox/Select? We will be looking into adding virtualization support to RAC in the near future which may help mitigate this.
I have a dropdown with 245 phone area code items with a bit more complex item component (flex layout with SVG flags, and the lag is noticeable.
It's probably acceptable for the end users, but the experience is imperceptibly affected. Honestly, I can even feel it on the example comboboxes when I'm rolling my mouse over the items that it's not following the mouse cursor on monitor refresh speed.
We abandoned that change because it was a potential breaking change if users were relying on those extra rerenders somehow. We could try looking back into it but that would still probably be a blocking factor...
It went through my mind as well, but then I realized that the standalone ListBox is fine, so I couldn't find any reason why a full re-render would be necessary in the dropdowns. Until a legitimate reason to expect full re-renders is identified, I wouldn't worry optimizing it. And if such a reason does exist, maybe it can be made an opt-in behavior?...
Gotcha, thanks for the additional information. I can see if the team may have bandwidth to take a look again at this issue, but it may not be for a while to be quite honest.