Virtualization

React 🟡 Mid

Type : React Performance

Definition

Technique qui ne rend que les elements visibles d'une grande liste, en recyclant les noeuds DOM au scroll. Transforme une liste de 10 000 elements en ~20 noeuds DOM reels.

Analogie

Comme une fenetre coulissante.

Exemple de code

class="cmt">// react-virtuoso ou react-window
import { FixedSizeList } from class="str">&#39;react-window&#39;;
<FixedSizeList height={400} itemCount={10000} itemSize={35}>
  {({ index, style }) => <div style={style}>Item {index}</div>}
</FixedSizeList>