Virtual Table Scrolling Performance lag Issue with WebSocket real-time data updates

[harrytothemoon]

Reproduction link

https://ant.design/components/table#table-demo-virtual-list

Steps to reproduce

1. Create a virtual table using rc-table's genVirtualTable
2. Implement with complex cell nodes
3. Load initial data with WebSocket real-time updates for certain rows
4. Scroll the table vertically

What is expected?

Smooth vertical scrolling performance with virtual list implementation.

What is actually happening?

Implementation Details

import { genVirtualTable } from 'rc-table';

const RcVirtualTable = genVirtualTable(
  (prev, next) => {
    const { _renderTimes: prevRenderTimes } = prev;
    const { _renderTimes: nextRenderTimes } = next;
    return prevRenderTimes !== nextRenderTimes;
  }
);

export default RcVirtualTable;

// Table
const Table = (props, ref) => {
  const renderTimesRef = React.useRef<number>(0);
  renderTimesRef.current  = 1;
  const virtualProps = { ref, _renderTimes: renderTimesRef.current };

  return <RcVirtualTable {...props} {...virtualProps} />;
};

export default React.forwardRef(Table);

Actual Behavior

1. Noticeable lag during vertical scrolling
2. Using React Profiler with highlight feature shows:

• All rows re-render on each scroll with color yellow
• All cells re-render on each scroll with color yellow
  This issue exists in both antd and rc-virtual-list demos

Investigation Findings

1. Root cause of cell re-renders:

• Located in BodyGrid component
• Issue traced to: https://github.com/react-component/table/blob/master/src/VirtualTable/BodyGrid.tsx#L244-L247
• itemProps.style causing unnecessary re-renders even when not needed

2. Additional observations:

• Commenting out the style prop prevents cell re-renders but scrolling lag persists
• Frame rate remains stable during scrolling
• Suggests possible CSS updates, reflow, or repaint issues

Potential Contributing Factors

• Complex cell node structure
• Subsequent WebSocket updates for specific rows

Environment	Info
antd	5.21.6
React	18.2.0
System	macOS 14.6.1
Browser	Chrome 130.0.6723.92

---

1. Issue persists across React 16 and React 18
2. Frame rate stability during lag suggests DOM operations (reflow/repaint) may be the bottleneck rather than React rendering
3. Current implementation follows antd usage patterns with rc-table's genVirtualTable