About Transfer component performance issues

[hqwlkj]

Version

3.3.0

Environment

Operating system: macOS high Sierra, browser: Safari browser, version 11.0.3 (13604.5.6), react:^16.2.0

Reproduction link

https://ant.design/components/transfer/

Steps to reproduce

When the amount of data is greater than 2,000, the UI rendering is slow and very fast.

What is expected?

It is recommended to optimize

What is actually happening?

[ant-design-bot]

Hello @hqwlkj. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

[hqwlkj]

Hello @afc163 Please check this link https://codesandbox.io/s/rjvv4qk6yn,

Large amount of data, the operation is very cautious, it is recommended to optimize.

[hqwlkj]

@yesmeck https://codesandbox.io/s/rjvv4qk6yn, Reproduce address

[liangchaofei]

数据大，还是会卡，复现demo:https://codesandbox.io/s/upbeat-brown-5qkm9

[aditya-padhi-kbl]

Hi @afc163 Thank-you for pointing to this issue in #30158
May I know if there are any plans to fix this perf issue as it will be very helpful to a lot of users.
I feel it will be great if we could support virtualization natively in Transfer component.
Here is a sample implementation I did by using react-window.
https://stackblitz.com/edit/react-ofcadv-gcds33?file=index.js

You have to go to line number 129 and set perfMode to true.

However, I am not able to setup some of the default behavior of transfer component like selectAll, individual item select etc.

Once again I would like to thank-you for your quick guidance.

Kind Regards,
Aditya

[afc163]

Transfer perfermance has been improved in #39465, also you can try this method of #40040 .

See https://codesandbox.io/s/pensive-kate-8nsiu1?file=/index.js