React Virtualization: Rendering Huge Lists

Rendering 10,000 items in a DOM kills the browser. Virtualization (Windowing) only renders what is visible.

react-window

We use `react-window` (lighter successor to `react-virtualized`).

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

<FixedSizeList
  height={150}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {Row}
</FixedSizeList>

This keeps the DOM node count constant (e.g., 20 nodes) regardless of the list size.