How to Use react-window or react-virtualized for Efficient Lists

Use react-window or react-virtualized to render only visible items in large lists for better performance. Wrap your list in their List component and provide item size, count, and a render function to display each item.

Syntax

react-window uses the FixedSizeList or VariableSizeList components to render virtualized lists. You provide height, width, itemCount, itemSize, and a children function that renders each item.

react-virtualized offers a List component with similar props: height, width, rowCount, rowHeight, and a rowRenderer function.

jsx

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

<List
  height={150}
  width={300}
  itemCount={1000}
  itemSize={35}
>
  {({ index, style }) => (
    <div style={style}>Item {index}</div>
  )}
</List>

Example

This example shows a simple react-window list rendering 1000 items with fixed height. Only visible items are rendered, improving performance.

jsx

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

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

  return (
    <List
      height={200}
      width={300}
      itemCount={1000}
      itemSize={35}
    >
      {Row}
    </List>
  );
}

Output

A scrollable box 300px wide and 200px tall showing a vertical list of items labeled "Item #1" to "Item #1000" with only visible items rendered.

Common Pitfalls

• Not setting fixed itemSize or rowHeight causes layout issues; use VariableSizeList if sizes vary.
• For react-virtualized, forgetting to set key in rowRenderer causes warnings.
• Passing inline functions directly to children or rowRenderer can hurt performance; define them outside or memoize.
• Not applying the style prop to each item breaks virtualization scrolling.

jsx

/* Wrong: Missing style prop breaks layout */
<List
  height={150}
  width={300}
  itemCount={100}
  itemSize={35}
>
  {({ index }) => <div>Item {index}</div>}
</List>

/* Right: Apply style prop to each item */
<List
  height={150}
  width={300}
  itemCount={100}
  itemSize={35}
>
  {({ index, style }) => <div style={style}>Item {index}</div>}
</List>

Quick Reference

Prop	react-window	react-virtualized	Description
height	Yes	Yes	Height of the list container in pixels
width	Yes	Yes	Width of the list container in pixels
itemCount / rowCount	itemCount	rowCount	Number of items/rows in the list
itemSize / rowHeight	itemSize	rowHeight	Height of each item/row in pixels
children / rowRenderer	children	rowRenderer	Function to render each item, receives index and style
Variable size support	VariableSizeList	CellMeasurer	Support for items with varying heights

Key Takeaways

Use react-window or react-virtualized to render only visible list items for better performance.

Always provide fixed item sizes or use variable size components to avoid layout issues.

Apply the style prop to each rendered item to maintain correct positioning and scrolling.

Define item render functions outside the component or memoize them to improve rendering speed.

Choose react-window for a smaller, simpler library or react-virtualized for more features.