Abbiamo una tabella con 10.000 righe che inizia a rallentare durante il rendering. Perché succede e come si può risolvere?

Il rendering di una tabella con 10.000 righe causa ritardi a causa del gran numero di elementi DOM, che sovraccarica molto il browser e rallenta il rendering.

Come risolvere:

• Virtualizzazione della lista (scroll virtuale) — renderizzare solo la parte visibile della tabella nel DOM, caricando le righe man mano che si scorre.
• Paginazione — dividere i dati in pagine, mostrando un numero limitato di righe alla volta.
• Ottimizzazione del rendering — usare la memorizzazione, evitare ridisegni inutili.

Esempio di utilizzo dello scroll virtuale con React e react-window:

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

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

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