Tabelle ed elenchi molto grandi possono rallentare notevolmente le prestazioni del sito. La virtualizzazione può aiutarti.
react-window è una libreria che consente di eseguire il rendering di elenchi di grandi dimensioni in modo efficiente.
Ecco un esempio di un elenco contenente 1000 righe visualizzate con
react-window. Prova a scorrere il più velocemente possibile.
Perché è utile?
A volte potrebbe essere necessario visualizzare una tabella o un elenco di grandi dimensioni contenente molte righe. Il caricamento di ogni singolo elemento di un elenco di questo tipo può influire in modo significativo sul rendimento.
La virtualizzazione degli elenchi, o "finestre", è il concetto di rendering solo di ciò che è visibile all'utente. Il numero di elementi visualizzati inizialmente è un sottoinsieme molto piccolo dell'intero elenco e la "finestra" dei contenuti visibili si sposta quando l'utente continua a scorrere. In questo modo, migliorano sia il rendering sia le prestazioni di scorrimento dell'elenco.