Hover behavior on top of JS for `Table` has performace issues

Reproduction link

Steps to reproduce

• Open the link
• Try to scroll to see frezzing of hover behavior
• Slowdown CPU to make sure more clearly (devtools → Performance → CPU *x slowdown)

What is expected?

Hovering styles, such as background should be declared using CSS only

What is actually happening?

JS is handled hover behavior, and change a className for each row. It’s creates the performance issues especially for cases with grouped rows (eg rowSpan)

Environment	Info
antd	> 4.17.0
React	18.1
System	mac OS
Browser	Chrome 100

---

Hi 👋 This is actually clone of https://github.com/ant-design/ant-design/issues/35395 issue, it looks like the problem is still there, so i’m trying again Is there are any side effect except changing a background that forces using JS to handle hover? PS Maybe give an opportunity to turn-off hover behavior complete for performance sensitive cases

[alienzhangyw]

Reference：antd表格性能差的解决方案 Use custom cell render to remove hover events:

// 注意TdCell要提到DataTable作用域外声明
const TdCell = (props: any) => {
  // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
  const { onMouseEnter, onMouseLeave, ...restProps } = props;
  return <td {...restProps} />;
};

const DataTable: React.FC<tableType> = (props) => {
  const { columns,dataSource } = props;
  return <Table 
          columns={columns} 
          dataSource={dataSource} 
          components={{
              body: { cell: TdCell },
            }} 
          />
  );
};

export default DataTable;

[Resetand]

@alienzhangyw thanks, it’s much faster

https://user-images.githubusercontent.com/33288402/167868669-86922631-4d0a-4b13-a8d9-80db396346c6.mov