What is windowing technique?

Windowing is a technique that 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. If your application renders long lists of data then this technique is recommended. Both react-window and react-virtualized are popular windowing libraries which provides several reusable components for displaying lists, grids, and tabular data.

Practical Code Example

// Windowing (Virtualization): Only renders rows currently in DOM viewport
import { FixedSizeList as List } from 'react-window';

function BigList({ items }) {
  return (
    <List height={400} itemCount={10000} itemSize={35} width={300}>
      {({ index, style }) => <div style={style}>Row #{index}</div>}
    </List>
  );
}