Maximum number of items for combobox

[sbarilov]

Hi team,
We are using a combobox and we have almost 2000 items for it.
I want to ask what is your recommendation around the maximum number of items to be used with combobox (haven't found any in paste docs) and possibly alternatives that fit our use case (having a pool of ~2000 to choose from).

Our page crashed when we reset the combobox or scroll all the way to the bottom with:
"Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."
which indicated an infinite render loop.
After some debugging looks like it is not cause by our components but rather a combobox and after limiting the number of items to 500 I can no longer reproduce the crash.

I appreciate your time and thoughts on this.

[ghost]

Thanks for the report here @sbarilov could you put together a reproduction example using our codesandbox template? that would help us diagnose the issue you're seeing with greater effectiveness! Thank you

[sbarilov]

@jb-twilio

[sbarilov]

@jb-twilio
Here is the example in code-sandbox: https://codesandbox.io/s/angry-field-ymwnve?file=/src/index.tsx:0-1554
STRs:

1. Click on the dropdown
2. Scroll down to select item 600

The app crashes when you select any item after scrolling for some time. This happens on paste-core version 15.1.0
It worked fine on version 10.18.0, started to happen after we have upgraded paste-core version.

This upgrade is breaking our SPA which leads to terrible user experience, we would really appreciate your help with finding the root cause and identifying a temporary fix/path forward that does not involve paste upgrade/downgrade.

[TheSisb]

Hi @sbarilov,

I think the usage of the component is a little off. Here are a few edits on your codesandbox and it seems to work fine for me: https://codesandbox.io/s/usecombobox-example-zzewvt?file=/src/index.tsx
Let me know if you're still seeing any issues.

[sbarilov]

@TheSisb
Can we connect over slack? Looks like I still get the crash

[ghost]

@sbarilov absolutely, please find us in the #help-design-systems channel. thank you

[sbarilov]

let me take a look and try, code on sandbox is an oversimplification of the code that we have

[sbarilov]

@TheSisb
This resembles the code we currently have: https://codesandbox.io/s/angry-field-ymwnve?file=/src/index.tsx
I appreciate if you take a look and let me know if something looks off to you
The crash is reproducible there
If you scroll al little bit and then click close to reset the dropdown, it crashed too
I am thinking if passing in a prop to component makes a difference here and causes an infinite render loop

[TheSisb]

Hi @sbarilov,

Please update the Paste dependencies in the sidebar and the issue will be fixed:

Can no longer reproduce the crash.

[sbarilov]

@TheSisb
Thanks for getting back to me
Unfortunately for console updating paste version may not be as easy, many teams may need to be involved to make sure nothing breaks
Last time we had to upgrade paste it was a lengthy process and we had to touch more than 300 files: https://github.com/twilio-internal/console/pull/2023/files
Do you have any recommendations on temporary fix that does not involve upgrading paste?

[TheSisb]

The other option is to manually install the latest version of @twilio-paste/combobox instead of going through core, but that may bloat your final bundle a bit and doesn’t always work reliably. You also have to manage this change moving forward, as it is tech debt.

It’s safest to upgrade core, especially in this case where nothing will break for you. 15.1.0 to 15.3.0 is completely safe.