How to Use Windowing for Long Lists in React Efficiently

Use the react-window library to render only visible items in a long list by creating a FixedSizeList or VariableSizeList component. This technique, called windowing, improves performance by rendering a small subset of items instead of the entire list at once.

Syntax

The main syntax involves importing FixedSizeList from react-window and using it to wrap your list items. You specify the height, width, item count, and item size. Inside, you provide a function to render each visible item.

• height: The height of the list container in pixels.
• width: The width of the list container in pixels.
• itemCount: Total number of items in the list.
• itemSize: Height of each item in pixels (for vertical lists).
• children: A function that renders each visible item based on its index.

jsx

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

<List
  height={number}
  width={number}
  itemCount={number}
  itemSize={number}
>
  {({ index, style }) => (
    <div style={style}>
      {/* Render item at index */}
    </div>
  )}
</List>

Example

This example shows a vertical list of 1000 items using FixedSizeList. Only visible items are rendered, improving performance for large lists.

jsx

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

const Row = ({ index, style }) => (
  <div style={{ ...style, padding: '0.5rem', borderBottom: '1px solid #ccc' }}>
    Item #{index + 1}
  </div>
);

export default function WindowedList() {
  return (
    <List
      height={300}
      width={300}
      itemCount={1000}
      itemSize={35}
    >
      {Row}
    </List>
  );
}

Output

A scrollable box 300px tall and wide showing items labeled "Item #1" through "Item #1000" with only visible items rendered.

Common Pitfalls

• Not setting fixed itemSize or inconsistent item heights can cause rendering issues.
• For variable item heights, use VariableSizeList instead of FixedSizeList.
• Forgetting to pass the style prop to each item div breaks the windowing layout.
• Rendering complex components inside the list without memoization can reduce performance.

jsx

/* Wrong: Missing style prop causes layout break */
const WrongRow = ({ index }) => (
  <div>
    Item #{index + 1}
  </div>
);

/* Right: Pass style prop to maintain correct positioning */
const RightRow = ({ index, style }) => (
  <div style={style}>
    Item #{index + 1}
  </div>
);

Quick Reference

Key points to remember when using windowing in React:

• Use react-window for simple, efficient windowing.
• Choose FixedSizeList for uniform item sizes.
• Use VariableSizeList if item heights vary.
• Always pass the style prop to item components.
• Memoize complex item components to improve performance.

Key Takeaways

Use react-window to render only visible items in long lists for better performance.

Always provide fixed item sizes or use VariableSizeList for variable heights.

Pass the style prop to each item to maintain correct layout and scrolling.

Memoize item components if they are complex to avoid unnecessary re-renders.

Windowing reduces memory and CPU usage by limiting rendered DOM nodes.