Windowing

If your application renders long lists of data (hundreds or thousands of rows), we recommend using a technique known as “windowing” (also called virtualization). This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

react-window, by the same author as react-virtualized, is a smaller and simpler successor and is the recommended starting point for new projects; react-virtualized itself is now in maintenance mode (bug fixes only). TanStack Virtual (headless, framework-agnostic) and react-virtuoso (richer built-in features like dynamic heights and infinite scroll) are newer, popular alternatives. All of these provide reusable components or hooks for displaying windowed lists, grids, and tabular data. You can also create your own windowing component, like Twitter did, if you want something more tailored to your application's specific use case.

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

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

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

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

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

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

MENU

Windowing