Il problema del rendering di liste numerose

Supponiamo di scorrere con map un array di diecimila elementi e di eseguire il rendering di un li per ciascuno. React creerà diligentemente diecimila nodi DOM, anche se sullo schermo ne entrano contemporaneamente solo un paio di dozzine.

La maggior parte di questi nodi è fuori dallo schermo e invisibile, ma il browser deve comunque crearli, eseguirne il layout e mantenerli tutti.

Gli alberi DOM estesi hanno un costo concreto per il browser. Il layout, il ricalcolo degli stili e la memoria utilizzata crescono con il numero di nodi, quindi un elenco enorme rallenta il rendering iniziale e aumenta il consumo di memoria.

Anche le interazioni semplici possono procedere a scatti quando il motore deve tenere traccia e ricalcolare il layout di decine di migliaia di nodi.

È durante lo scorrimento di un elenco enorme che gli utenti percepiscono maggiormente il problema. Il browser ridisegna il contenuto e può ricalcolare il layout mentre il contenuto si sposta; con troppi nodi, la frequenza dei fotogrammi scende al di sotto del livello di fluidità.

Il risultato è uno scorrimento a scatti e con ritardi, che fa sembrare l'interfaccia poco reattiva indipendentemente dalla velocità del resto dell'app.

È possibile confermare il problema nel pannello Memory di DevTools del browser, che indica il numero di nodi DOM presenti nella pagina. Un elenco che crea migliaia di nodi risulta chiaramente visibile in questo pannello.

Osservare questo numero aumentare rapidamente mentre si esegue il rendering di più elementi fornisce una prova concreta che la dimensione del DOM è il collo di bottiglia.

La virtualizzazione, talvolta chiamata windowing, esegue il rendering solo degli elementi attualmente visibili e di un piccolo buffer, anziché dell'intero elenco. Durante lo scorrimento, gli elementi che entrano nell'area visibile vengono montati, mentre quelli che ne escono vengono smontati.

In questo modo il DOM attivo rimane ridotto indipendentemente dal numero di elementi contenuti nei dati, separando la dimensione del DOM da quella del dataset.

La finestra visibile viene ricavata dalla posizione dello scorrimento, dall'altezza del contenitore e dall'altezza degli elementi. Dividere l'altezza dell'area visibile per l'altezza di un elemento indica approssimativamente quante righe vi entrano, mentre l'offset di scorrimento indica quali sono.

La libreria utilizza questi numeri per decidere esattamente quale sottoinsieme di elementi eseguire in ogni momento.

Diverse librerie implementano il windowing. react-virtualized offre molte funzionalità, ma è più grande; react-window è una riscrittura più compatta e mirata dello stesso autore; TanStack Virtual è un'opzione moderna headless.

Per la maggior parte degli elenchi, react-window offre un eccellente equilibrio tra semplicità e prestazioni, ed è per questo che il corso si concentra su questa libreria.

La virtualizzazione è vantaggiosa quando gli elenchi sono lunghi, indicativamente di diverse centinaia di righe o più, oppure quando le righe contengono molte immagini e componenti annidati. Sono questi i casi in cui la dimensione del DOM ha un impatto reale sulle prestazioni.

I feed infiniti, le tabelle di dati estese e le cronologie delle chat sono scenari tipici in cui il windowing diventa essenziale anziché facoltativo.

Per elenchi brevi di poche dozzine di elementi semplici, la virtualizzazione aggiunge complessità senza offrire vantaggi significativi. Il posizionamento assoluto e il sovraccarico delle misurazioni possono persino peggiorare complessivamente le prestazioni.

Riservi il windowing ai dataset realmente estesi; per quelli piccoli, un semplice map è più intuitivo e perfettamente veloce.

Con il windowing, un elenco di centomila elementi mantiene nel DOM soltanto i pochi elementi visibili: il rendering iniziale è rapido, il consumo di memoria rimane basso e lo scorrimento è fluido.

Si accetta un po' di complessità in più nella configurazione in cambio di prestazioni che non dipendono più dalla quantità di dati, che è la promessa fondamentale della virtualizzazione.

Decida quando vale la pena usare la virtualizzazione.

Eseguire il rendering di migliaia di nodi DOM aumenta il costo del layout, il consumo di memoria e gli scatti durante lo scorrimento; è possibile confermarlo tramite il conteggio dei nodi in DevTools. La virtualizzazione esegue il rendering solo della finestra visibile e di un buffer, mantenendo ridotte le dimensioni del DOM.

react-window è una scelta mirata e leggera tra react-virtualized e TanStack Virtual. Lo si utilizzi per elenchi estesi o pesanti e lo si eviti per quelli brevi e semplici.