MultiSelect performance with large lists

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%.

[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.

[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.