We have a table with 10,000 rows that starts lagging during rendering. Why does this happen and how can it be fixed?

Rendering a table with 10,000 rows causes lag due to the large number of DOM elements, which heavily loads the browser and slows down rendering.

How to fix:

• List virtualization (virtual scroll) — render only the visible part of the table in the DOM, loading rows as you scroll.
• Pagination — split data into pages, showing a limited number of rows at a time.
• Render optimization — use memoization, avoid unnecessary re-renders.

Example of using virtual scroll with React and react-window:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

<List
  height={500}
  itemCount={10000}
  itemSize={35}
  width={300}
>
  {Row}
</List>