MultiSelect performance with large lists

[Yohanna]

The MultiSelect component doesn't handle large lists well. The performance degrades to the point where it's unusable.

Rendering the same list with ComboBox doesn't affect the performance as much.

Maybe we can have built-in "windowing" using react-window for example?

Detailed description

Is this issue related to a specific component?

MultiSelect & MultiSelect.Filterable

What browser are you working in?

Chrome latest

What version of the Carbon Design System are you using?

"carbon-components": "9.18.0", 
"carbon-components-react": "6.32.4",
"carbon-icons": "7.0.7",

Steps to reproduce the issue

https://codesandbox.io/s/xrjy36l1pz

Additional information

You can also activate the FPS Meter where you can see the frame rates drop significantly once the dropdown is clicked or use the Performance Monitor to see the CPU Usage. On my computer, once I click on the dropdown, the usage jumps to 100%.

[kevinkbender]

I was just wondering if anyone is planning to take a look at this? This issue is affecting me too.

Not using the sortItems seems like it might help a bit, but it's still pretty slow.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[laurenmrice]

not stale

[dakahn]

@asudoh Wondering if you have any insight into this 🔮

[asudoh]

@dakahn I cannot rattle off one, but if you go to Performance tab in Chrome DevTools, click Record button, run the user action with the problem, and click Stop button button, you'll get insightful info wrt what code ran taking long time. You can right-click on the chart to save it, so great if you can share the result here. I can work with you on the analysis.

[carbon-bot]

Hi there! :wave: If you're wondering why this issue was moved, we're currently updating our repo structure so that every package is found in the same project.

This should not have any impact for you, but we wanted to give you a heads up in case you were wondering what is going on. If you have any questions, feel free to reach out to us on Slack or contact us at: carbon@us.ibm.com. Thanks!

[vpicone]

Another minimal replication of this issue using static data: https://codesandbox.io/s/frosty-shape-gzdku

A cloud team reached out with 4000 items in their list. At that amount, the component becomes unusable. The UX is improved by using Multiselect.Filterable (which is a wild and hard to find API) but the performance issues are still very real.

[tvelingkar]

@laurenmrice any updates on this issue? This issue is affecting our application.

[laurenmrice]

Adding this slack convo in here for visibility on this topic:

[Yohanna]

Are there any updates on this issue?

Note: I've just updated the CodeSandbox to the latest Carbon versions.

[ganisback]

I am also facing this issue

[dezkareid]

The problem with this kind of issue is take a lot of time to render a lot of items.

Maybe adding react-virtual to component this can be solved but I don't know how can impact the multiselect implementation or a better approach is create a new component to handle heavy data