Virtualization

Definition

Technique de rendu qui n'affiche que les elements visibles dans le viewport, meme pour des listes de milliers d'items. Les elements hors ecran ne sont pas montes.

Analogie

Comme un ascenseur panoramique : tu ne vois que les etages devant toi, pas les 100 etages en meme temps.

Exemple de code

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

const virtualizer = useVirtualizer({
  count: 10000,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 35,
});
// Ne rend que ~20 items visibles au lieu de 10000

Cas d'usage

Listes ou tableaux de plus de quelques centaines d'elements (logs, contacts, produits).

Anti-pattern

Termes lies