Avem un tabel cu 10.000 de rânduri care începe să încetinească la randare. De ce se întâmplă acest lucru și cum se poate remedia?

Redarea unui tabel cu 10.000 de rânduri cauzează întârzieri din cauza numărului mare de elemente DOM, ceea ce suprasolicită browser-ul și încetinește randarea.

Cum se poate remedia:

• Virtualizarea listei (scroll virtual) — redarea în DOM doar a părții vizibile a tabelului, încărcând rândurile pe măsură ce derulați.
• Paginarea — împărțirea datelor în pagini, afișând un număr limitat de rânduri odată.
• Optimizarea randării — utilizarea memoizării, evitarea rerender-urilor inutile.

Exemplu de utilizare a scroll-ului virtual cu React și react-window:

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

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

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