List virtualization improves performance by rendering only the visible items in a large list instead of mounting every item in the DOM.

1. The Problem: Rendering Large Lists

{items.map(item => (
  <Row key={item.id} item={item} />
))}

For thousands of items, rendering every row can increase DOM size, memory usage, and rendering costs.

This can make scrolling and interactions feel sluggish.

2. Solution: List Virtualization

react-window is a library for efficiently rendering large lists and grids.

Instead of mounting every row, it renders the visible rows and a small buffer of nearby items.

Benefits include:

• Fewer mounted DOM nodes.
• Reduced rendering and layout work.
• Better scrolling performance for large datasets.

3. Example with react-window v1

Install the v1 API:

npm install react-window@1

Then create a fixed-height virtualized list:

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

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

function MyList() {
  return (
    <List
      height={400}
      itemCount={10000}
      itemSize={35}
      width="100%"
    >
      {Row}
    </List>
  );
}

Here:

• height defines the visible list viewport.
• itemCount specifies the total number of rows.
• itemSize defines each row’s height in pixels.
• style positions each row correctly and must be applied to its outer element.

With a 400px viewport and 35px rows, approximately 12 rows fit at once, plus any overscan rows. Even with 10,000 items, only a small portion needs to be mounted.

4. What About Variable Row Heights?

For rows with different heights, react-window v1 provides VariableSizeList.

<VariableSizeList
  height={400}
  itemCount={items.length}
  itemSize={index => getSize(items[index])}
  width="100%"
>
  {Row}
</VariableSizeList>

If row heights change after rendering, call resetAfterIndex(index) on the list instance to invalidate cached measurements from that index onward.