Long list optimization

[benjycui]

ref: https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/

• Select The select component renders the data 2000-5000 difficult and slow #7086 Select组件选项内容多的时候渲染速度慢 #14540
• AutoComplete autocomplete is slow for 2000 items #17604
• Dropdown Dropdown组件中MenuItem比较多的时候(300左右)会卡顿 #8076
• Cascader Inside the options too much data, flattenOptions.filter() takes too long #9079
• Table 含选择框的table,当一次显示的数据量较多时,勾选响应速度变慢 #12408
• List
• Tree Performance issue of tree component #15039 Tree组件，我一个节点下面大约有1000多个子节点 。在展开和选择时候，页面非常卡顿 #19522
• TreeSelect TreeSelect存在性能问题 #13266

[yesmeck]

看了下文章最后讲到 Reactabular，它实现的 virtualization 效果确实很好，不过表格我感觉暂时还不需要这个，因为现在是数据不多的时候也会有性能问题，而且数据多的时候还是建议分页吧。

[yesmeck]

原来 react-lazyload 给没在 viewport 的组件也渲染一个 div 是为了填充高度，让滚动条能正确显示，这个还是 Reactabular 和 react-virtualized 的实现比较高明。

Reactabular 是上下各渲染一个 tr，然后高度分别设成没显示的行高度之合。

react-virtualized 是在列表外面套一个 div，把高度撑起来，然后通过 position: absolute; top: 36700px; 来调整要显示元素的位置。

[paranoidjk]

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。

在能确定每个 Item 的行高前提下，基于 react-infinite 包装的 table-view，效果还行。

[benjycui]

别贴内网地址。。。

[benjycui]

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。

How about minItemHeight or minRowHeight. According to me, if we know the min height of all rows, it will be enough to react-virtualized and react-infinite

[paranoidjk]

yep，both height and minHeight will work

[wangtao0101]

被这个问题折磨了很久了，昨天终于做了下支持任意高度的scroll list方案。react-list-any-height

[benjycui]

@wangtao0101 文档都不写个？

[wangtao0101]

@benjycui 兄弟，还没来得及写呀。

[wangtao0101]

@benjycui 文档ok了

[tiffon]

I can't read most of this thread, so apologies if this is not relevant, but I thought I'd share the approach we took with virtualized scrolling in Jaeger UI. It's not generalized, at this point, but might still be worth a gander.

jaegertracing/jaeger-ui - src/components/TracePage/TraceTimelineViewer/ListView/index.js

The items do not need to be fixed heights (possibly similar to react-list-any-height):

src/components/TracePage/TraceTimelineViewer/ListView/index.js#L321,L373

Some notes from the PR:

Started with react-virtualized, but issues around flashes of un-rendered regions while scrolling and dynamically sized / periodically changing content lead to revival of old project that essentially does the same thing: src/components/TracePage/TraceTimelineViewer/ListView/*.

ListView is more optimized to our needs (and less versatile). These optimizations include:

• Taking the approach of rendering less often and larger amounts of items per render
• Optimizing for scrolling in both directions instead of only the current scroll direction
• Having a concept of minimum and regular "overscan", which means if the currently rendered list of items meets a minimum buffer, don't render more, but if it doesn't, then render enough meet the minimum buffer and some extra, as well

Also, most excellent work on Ant Design! It's a joy to work with 👍

[Nokecy]

有计划在什么版本加入吗？

[iblq]

SuperSelect is based on antd Select, which supports a virtual list of tens of thousands of data, the same api as antd Select, which works fine in my project.

now, SuperSelect move to antd-virtual-select

antd-virtual-select repo

this is demo

[megawac]

Cool stuff @iblq! I made a slight modification of your demo to include a comparison to the ant select https://codesandbox.io/s/superselect-8xlwk

[abenhamdine]

Hello Ant Team,
First love love antd components.
I'm using the Select component and really really need to add react-window or some other way to optimize it, as there are over 2000 options making the component just painfully slow. Please let me know if you have any updates on this.

https://github.com/react-component/select alpha version already implements virtual scroll.
You only have to wait for antd 4.0 to have it.

[JonDum]

@megawac lmao what. Are we following the same thread? Where was anyone offering to hire you?

[AleksandrHovhannisyan]

Guess I'll have to wait for 4.0 ⌚️

The SuperSelect demo above is pretty amazing, though, ngl. Very performant, too. Unfortunately, I don't want to copy-paste 300+ lines to get a performant Select, especially since I'm using TypeScript and it's in JS. Still pretty cool!

I wish react-window weren't just limited to lists...

Another option is react-virtualized-select, but there are two problems: 1) It's not Ant 😄 , 2) It's no longer maintained, so if you run into issues, 🤷‍♂

[AleksandrHovhannisyan]

For anyone wondering, one solution to this for non-dropdown/select data is the List component with the optional pagination prop. Works like a charm!

[jackton1]

LazySelectInput should handle loading >2000 without any rendering issues.

[abenhamdine]

new Table component also implement virtual list, see https://github.com/react-component/table/releases/tag/v7.0.0-alpha.16

[entrptaher]

@abenhamdine Is there any way we can use the new table component for virtualization support with existing ant design projects?

[abenhamdine]

@abenhamdine Is there any way we can use the new table component for virtualization support with existing ant design projects?

Perhaps, but IMHO it's better to wait for antd 4.0, new table component is already integrated in 4.0 prepare branch.

[entrptaher]

Yesterday I tried to add the alpha version but wasn't successful.

Alright, then I will use the this one for now.

https://github.com/wubostc/virtualized-table-for-antd

It's had a bit messy doc, I also needed to fix the css a bit.

[focux]

Is there a way we can use the new select component in v3 while we wait for the v4? Or is there a third party select component that implements a virtualized list and with the same antd style?

EDIT.
I'm using the SuperSelect component posted above and it's working perfectly

[shivam-ahuja]

any update ?

[abenhamdine]

@shivam-ahuja you can try Select component in antd 4, 4.0.0-rc1 is out.
See https://next.ant.design/components/select/#components-select-demo-big-data

[ecast96]

Has the table filtering been worked on? I'm still experiencing long load times on filtering large sets of data as seen in #11331. Filtering is pretty much unusable with a table having over 1k items.

[afc163]

Long list render perfermance has been optimized in v4: #21656

[vortesnail]

Cool stuff @iblq! I made a slight modification of your demo to include a comparison to the ant select https://codesandbox.io/s/superselect-8xlwk

so many bugs, do not use.

[ruizhang-chowbus]

https://github.com/bvaughn/react-window

Maybe we should make this built-in.

react-window must specify row height.when row height vary, it is display in incorrect way.

[ROTGP]

Asking again in 2022, is there any progress on this issue? It seems that TreeSelect is performant and uses virtual scrolling, whereas the Cascader (which is very similar) does not use virtual scrolling, and freezes when using many elements. This is a real shame as the Cascader is a fantastic component, however the performance issue means I can't use it.

[SunXinFei]

react-window can not use for fixed column

[SunXinFei]

https://4x.ant.design/components/table-cn/#components-table-demo-virtual-list need to check the filter、sort function.