# Virtualizzare una lista lunga

Virtualizzare una lista significa montare solo le righe visibili: il DOM resta piccolo, ma altezza, accessibilità e ricerca vanno gestite a mano.

> Pagina: https://ui.eneawork.it/blog/react-list-virtualizzazione
> Markdown: https://ui.eneawork.it/blog/react-list-virtualizzazione.md

*2026-11-01*

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 catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## 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

## 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.

## FAQ

### Da quante righe conviene virtualizzare?

Sopra le mille righe, di solito. Sotto le trecento il costo di misura e scroll non ripaga la complessità.

### La virtualizzazione rompe Ctrl+F?

Sì, per le righe non montate. Molte liste aggiungono una ricerca interna che filtra i dati, così il browser non serve.

### Funziona con righe di altezza diversa?

Sì, con misurazione dinamica: TanStack Virtual la offre, ma ogni riga non montata viene stimata e lo scroll può correggersi.

### Serve una libreria o bastano poche righe di codice?

Per una lista verticale semplice bastano poche righe; per griglie, righe variabili e tabelle una libreria evita errori di misura.

### La lista virtualizzata è accessibile agli screen reader?

Non da sola. Serve dichiarare il totale con attributi ARIA e un testo di riepilogo, altrimenti la lista sembra corta.