React: How to implement virtualization of long lists in React?

Virtualization — a technique where ONLY visible elements of the list are rendered. If you have 10,000 rows — only 20-30 on screen are rendered.

Why it matters: Without virtualization, rendering 10,000 DOM nodes would create massive performance issues — slow initial render, high memory usage, and sluggish scrolling. Virtualization keeps the DOM small regardless of dataset size. It is essential for chat apps, data tables, log viewers, and any list exceeding a few hundred items.

How virtualization works:

1. The library calculates which items are currently visible in the viewport.
2. Only those items are rendered as actual DOM elements.
3. Invisible items are replaced with invisible spacer elements that maintain correct scroll position.
4. As the user scrolls, items enter/leave the DOM dynamically.

react-window — popular library for virtualization:

1import { FixedSizeList } from "react-window";
2
3const Row = ({ index, style }) => (
4  <div style={style}>
5    <p>Element {index} — Data from large list</p>
6  </div>
7);
8
9function VirtualList({ items }) {
10  return (
11    <FixedSizeList
12      height={600}       // Container height
13      width="100%"      // Width
14      itemCount={items.length}  // Number of elements
15      itemSize={50}     // Height of each element
16    >
17      {Row}
18    </FixedSizeList>
19  );
20}

For elements with different heights — VariableSizeList:

1import { VariableSizeList } from "react-window";
2
3const DynamicRow = ({ index, style, data }) => (
4  <div style={style}>
5    <p>{data[index].text}</p>
6  </div>
7);
8
9<VariableSizeList
10  height={600}
11  itemCount={items.length}
12  itemSize={(index) => items[index].height || 50}
13  itemData={items}
14>
15  {DynamicRow}
16</VariableSizeList>

react-virtuoso — more modern alternative:

1import { Virtuoso } from "react-virtuoso";
2
3<Virtuoso
4  style={{ height: "600px" }}
5  totalCount={10000}
6  itemContent={(index) => <div>Element {index}</div>}
7/>

Performance considerations:

• Virtualized lists need a fixed container height — otherwise the library cannot calculate which items are visible.
• Each row must have a unique stable key (preferably the item ID, not the index).
• itemSize should be accurate — wrong values cause scroll jumps.

When to use:

• Lists > 100 elements.
• Infinite scrolling.
• Tables with many rows.