Virtualizzare una lista lunga

Virtualizzare una lista lunga significa montare solo le righe visibili, più un piccolo margine, invece di tutte: il DOM smette di crescere con il numero di elementi.

Il problema, in numeri

Diecimila righe con cinque nodi ciascuna producono cinquantamila elementi nel DOM. Il browser li impagina tutti, anche quelli fuori schermo: la lista si apre in secondi e ogni filtro li rimisura. La virtualizzazione porta il conteggio a poche decine di righe, indipendenti dal totale.

Come si usa

import { useRef } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";

export function Rows({ items }) {
  const parentRef = useRef(null);
  const virtual = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 36,
  });
  return (
    
      {virtual.getVirtualItems().map((row) => (
        
          {items[row.index].name}
        
      ))}
    
  );
}

Il contenitore ha altezza fissa e overflow: auto; il hook restituisce solo le righe dentro la finestra, ognuna posizionata con translateY sul proprio offset. La lista sembra completa perché il contenitore interno conserva l'altezza totale.

Cosa si paga

• Altezza delle righe: con righe a contenuto variabile serve una misura reale, altrimenti lo scroll salta.
• Ricerca del browser: il testo non montato non si trova con Ctrl+F, e questo rompe un'abitudine diffusa.
• Accessibilità: una lista di decine di nodi non annuncia il totale; servono aria-rowcount e un riepilogo testuale.

Installazione

npm i @tanstack/react-virtual
npm run dev

TanStack Virtual è distribuito con licenza MIT. In alternativa react-window, sempre MIT, copre lo stesso caso con un'API più rigida e meno dipendenze.

Record vivi nel catalogo

Tre record mostrano liste e tabelle dense: leads-data-table, lumina-interactive-list e rolling-list. Per esplorare per categoria parti da 111.985 componenti.

La limitazione

La virtualizzazione non rende veloce una riga lenta: se ogni elemento monta una tabella annidata, il problema resta. Non risolve nemmeno la stampa e l'esportazione, che hanno bisogno di tutte le righe: lì conviene generare l'output fuori dal DOM visibile.

Dove continuare

Il confronto fra le tabelle misurate è in librerie tabella React; gli errori di key nelle liste sono in key warning nelle liste; il confronto fra ecosistemi è in librerie React 2026.