MENU

Windowing

If your application renders long lists of data (hundreds or thousands of rows), we recommend using a technique known as “windowing”. 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 and react-virtualized are popular windowing libraries. They provide several reusable components for displaying 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>);