Antd table performance issue when pagination is disabled and data set is > 100. This issue causes huge lag in row selection and page navigation. Issue occurred since 2019

[AsuraKev]

Reproduction link

Steps to reproduce

Display around 100rows in Antd table, clicking on selection causes a noticeable delay. Have tried other people's work around but man the delay is really obvious. Trying to migrate from ag grid to antd, but the table is almost making the component unusable...

ShouldCellUpdate is not helping shouldCellUpdate: (record, prevRecord) => !_.isEqual(record, prevRecord)

What is expected?

Not expecting performance issue for 100+ dataset

What is actually happening?

delay for small size data

Environment	Info
antd	5.8.2
React	18.2
System	web
Browser	Chrome

[AsuraKev]

300 items https://github.com/ant-design/ant-design/assets/52765572/63bb8408-d3c9-4706-9484-de8ad1e2ae39

[noszone]

Try to disable motion animation, there is a guide - https://ant.design/docs/react/customize-theme#disable-motion

<ConfigProvider
        theme={{
          token: {
            motion: false,
          },
        }}
      >
        /*your table here*/
</ConfigProvider>

I tested, and it looks faster.

[AsuraKev]

Doesnt help. https://codesandbox.io/s/custom-selection-antd-5-8-2-forked-nhdcg9 Even turning off animation, delay is very obvious especially if you have custom cell render. Specifying ShouldCellUpdate to return false for each cell is not helping as well

[leoreda]

Same issue here. Disabling motion animation didn't work for me. Any other possible solution to this?

[AsuraKev]

Same issue here. Disabling motion animation didn't work for me. Any other possible solution to this?

You can try using the virtual table. The performance is pretty good and you can still do what the Table component does

[muzea]

With the current antd table design, optimizing this performance requires a lot of work.

In my opinion, the main reason for the poor performance is that each row is re-rendered every time when some row is selected. The reason for this is in the current implementation of selectable columns, which are dynamically generated by a transform function, transformColumns is a function generated by a logically complex useCallback, which relies directly on rowSelection, a parameter in table's props that is a newly generated object each time.

If we(mainly antd maintainers) want to optimize here, it would be better to separate rowSelection.selectedRowKeys and pass it as a separate context. In the long run, the state/configuration in the props should be clearly distinguished, and functions like transformColumns should not change when the configuration props does.

---

目前 antd table 的设计下，优化这个性能需要不小的工作量。

在我看来，导致性能差的主要原因时每次选中时，每一个 row 都会 re-render。原因在当前的 可选择 列的实现，是通过一个 transform 函数动态生成，transformColumns 是一个逻辑复杂的 useCallback 产生的函数，它直接依赖了 rowSelection，这个参数在 table 的 props 中是一个每次都会新生成的对象。

如果想在这里做优化的话，将 rowSelection.selectedRowKeys 单独分离出来使用 context 传递会比较合适。长远来看，应该明确区分出 props 中的 状态/配置，在 配置 类 props 不变时，transformColumns 这类函数不应该出现变化。