TransferList performance issues with large number of items

[justinsmid]

I have noticed scrolling and interacting with the TransferList gets very slow and sluggish when using a large number of items (starts around 300 items for me).

• What package has an issue: @mantine/core
• What package version are you using: 3.3.5
• In which browser and operating system issue occurred: Checked on Linux using Chrome and Firefox
• If possible please attach link to codesandbox with reproduced issue: https://codesandbox.io/s/mantine-transferlist-performance-1fznr
• Do you have an idea how to fix the issue: Use a virtual list to only render the items that are currently in view.
• Are you willing to participate in fixing this issue (it's totally fine if not) and create a pull request with the fix?: No, unfortunately I do not currently have the time to work on this.

[rtivital]

Thanks for reporting, I'll try to add memoization to transfer list item props and see if it resolves the issue. Actually, I think we also have the same performance in Select and MultiSelect components, so maybe memoization will also do the trick there.

[rtivital]

I've added memoization like so – https://codesandbox.io/s/mantine-transferlist-performance-forked-mf78u?file=/src/App.js It seems to be a little better, not perfect. Is performance in my sandbox as bad as in yours?

[justinsmid]

It's noticeably better than before in your sandbox, but like you said, not perfect.

Have you considered using a virtual list for rendering the items? I haven't tried it, but I would assume that would solve the issue entirely.

I'm not sure how you would want to go about implementing it, but a library like react-virtualized (or the more light-weight variant react-window) seem quite applicable. There's even react-virtualized-select for select components that you might be able to use for the Select components like you mentioned.

in their demo, i have no performance issues when rendering a list, regardless of the amount of elements.

[rtivital]

My concern with virtualized libraries is that almost all of them will take ~30% of @mantine/core bundle, so I'd rather implement limit prop like in Select.

[rtivital]

In 3.6.0 transfer list now comes with limit prop, it can be used to fix performance issues