React Virtualization: Rendering Huge Lists

Rendering 10,000 rows in the DOM will crash your browser. But users expect to scroll through infinite feeds. The solution is Virtualization (or Windowing).

Concept

Only render the DOM nodes that are currently visible in the viewport (plus a small buffer). As the user scrolls, recycle the DOM nodes with new data.

react-window

Brian Vaughn’s `react-window` is the standard library for this.

import { FixedSizeList as List } from 'react-window';

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

const Example = () => (
  <List
    height={500}
    itemCount={10000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

This renders only ~20 div elements, even though the scrollbar acts like there are 10,000.