Virtualization

React 🟡 Mid

Définition

Technique de rendu qui n'affiche que les éléments visibles dans le viewport, même pour des listes de milliers d'items. Les éléments hors écran ne sont pas montes.

Analogie

Comme un ascenseur panoramique : tu ne vois que les étages devant toi, pas les 100 étages en même 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'éléments (logs, contacts, produits).

Anti-pattern

Virtualiser une liste de 20 éléments : l'overhead de la virtualisation n'en vaut pas la peine.

Termes liés

#performance#interview

En entretien

Explique-moi ce qu'est la virtualization de liste.
C'est une technique de rendu qui n'affiche que les éléments visibles dans le viewport, même pour des listes de milliers d'items, comme un ascenseur panoramique où tu ne vois que les étages devant toi. Les éléments hors écran ne sont tout simplement pas montés.
Quand est-ce que tu éviterais de virtualiser une liste ?
Sur une liste de 20 éléments, l'overhead de la virtualisation n'en vaut pas la peine. Elle est utile surtout à partir de quelques centaines d'éléments, comme des logs, des contacts ou des produits.

Fiche mise à jour le 2026-09-27