Performance issues with Combobox and large data sets.

[andioneto]

Hi folks 👋
I'm need to include a form element to select a country for creating an address instance and am hoping to use <Combobox />. I noticed off the bat that the render is lagging quite a bit, in particular, the highlighted row render lags.

Here is a sandbox with a basic example of this.

I tried to re-create the combobox using react-virtual and react-virtualized, but couldn't get it working within my timebox (not going to share those because I already deleted them 🙃). I also tried to dynamically add an remove items from the list, but 1. that probably isn't ideal since it would mean that not all the list items are included in the DOM, 2. again I ran up to my allotted time and it wasn't working well enough to be production ready.

I'm wondering if this is a known issue and if there are plans to iterate on this component in the near future? Seems like it would be a useful built in optimization for the component.

Looking forward to hearing your thoughts. Thank you!

[richbachman]

Hi @andipants12

I'll touch base with the rest of the engineering team, and get back with you asap on this one.

[richbachman]

Hi @andipants12

Per the slack conversation and for visibility:

In its current state, you'll need to revert back to the Combobox Primitive in order to incorporate react-virtual or react-virtualized. We can work on a codesandbox example together if you'd like.

I'll also add a ticket to our backlog to investigate a prop that will add react-virtual or react-virtualized to our styled Combobox.

[andioneto]

Ok cool, awesome. Thank you! I can spin back up what I created last night with either library. Any idea which the team is more likely to go with, eg. react-virtual or react-virtualized? I think the later is more widely used based on what I saw in npm downloads per week, but react-virtualized does not offer hooks, HOCs.

[richbachman]

I suspect we'll go with react-virtual, but nothing has been fully decided yet.

[ghostling]

Hi! We noticed this as well in our project but didn't have time to dig further. IIRC, it appeared that the rerender times seemed to scale linearly with the number of items in the list.

Stumbled upon this issue/comment in the underlying Downshift library that may be helpful: downshift-js/downshift#730 (comment)

[andioneto]

@ghostling interesting! I read a few of his issue comments and demos while researching how to make the combobox more performant, looks like I missed this though. I’ll have to try it out and see if the memorization is enough to fix the laggy render. And yeah, the log-n lag would make sense since the combobox implementation is mapping over the items passed to the component. When I have some time I’ll try this out with the combobox primitives. 💯

[andioneto]

@richbachman for using react virtual it would be awesome if we could expose a ref directly on the unordered list element. In my investigation I was passing a menu ID to the combobox hook and that seemed to work fine, but I can see that causing issues down the line.

PS: please excuse the lack of formatting in my posts. We just moved and don’t have internet so I’m responding in my phone 😅

[TheSisb]

I've created a ticket in our backlog to fix this.

[TheSisb]

PR is up: #886

[andioneto]

@richbachman @TheSisb Wanted to follow up and check to see if you have plans to virtualize the combobox above a certain number of items, or if that is something teams should own?

[serifluous]

We've got a ticket for that in our upcoming release! https://issues.corp.twilio.com/browse/DSYS-2368

[andioneto]

Ok awesome! That's the release at the beginning of November? Thank you! I'll mark this as answered 💯 :

[serifluous]

Mid-December, though we'll likely get to this before the actual release date.

[TheSisb]

Hi @andipants12, we recently merged virtualization into combobox. Please update and let us know if it helps! (PR #1117)

[andioneto]

Thanks for the update @TheSisb! I checked it out last week. I'm curious why the component does not virtualize when an option template is provided? I was working on a combobox for country selection. Originally I was using the legacy icon components, but I chatted with @vnguyen94 and see that they also implemented a version without the icons. It still uses an option template though.
From the VNV Console side, we have decided to use the Numbers Console country combobox to reduce duplication. Maybe Van can clarify whether or not virtualization is needed for their implementation?

[vankhoawin]

it's not necessarily needed as the Country Dropdown using the latest Paste dependencies is fast enough for general use, but i would still note that the initial sort/input change on the component still has a half-second of delay so we still have a virtualization ticket in our backlog to remediate this. I'll DM you both our storybook so that you can test it out.

[TheSisb]

Hi @andipants12,

We didn't add virtualization when optionTemplates are passed because they technically can cause dynamic heights on option items. This would require the virtualizer to mount everything, access each item's ref, compute the height in JS, then unmount it all and begin virtualization. This up-front process would cause significant performance degradation of the UX.

[andioneto]

Sorry, I missed this reply. Thank you for the context and for implementing this! That would explain the degradation I noticed before.