React : comment afficher une liste de 10 000 éléments sans ramer ?

Il faut virtualiser la liste : ne rendre que les ~30 lignes visibles, plus une petite marge. @tanstack/react-virtual est la référence actuelle :

const parentRef = useRef<HTMLDivElement>(null);
const v = useVirtualizer({
  count: rows.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 36,
});

return (
  <div ref={parentRef} style={{ height: 600, overflow: 'auto' }}>
    <div style={{ height: v.getTotalSize(), position: 'relative' }}>
      {v.getVirtualItems().map(item => (
        <div key={item.key} style={{ position: 'absolute', top: item.start, height: item.size, width: '100%' }}>
          {rows[item.index].name}
        </div>
      ))}
    </div>
  </div>
);

Pose-toi aussi la question produit : un utilisateur lit-il vraiment 10 000 lignes ? La pagination ou la recherche côté serveur est souvent la meilleure solution.