FixedSizeList: Rendering Thousands of Items

You add react-window to a project with your package manager, for example installing the react-window package. It is small and has no heavy dependencies.

Once installed you import the list components you need, most commonly FixedSizeList for rows that all share the same height.

FixedSizeList needs several props to function: height and width define the scroll container, itemCount is how many items exist, and itemSize is the height of each row in pixels.

The children prop is a render function that draws a single row. With these, the component knows the geometry it needs to window correctly.

The children render function receives an object with index and style. index is which item to render, letting you look up the right data, and style positions the row within the virtual list.

You return the JSX for that single row, and react-window calls this function only for the rows currently in the window.

The style prop is essential and must be applied to your row element. react-window positions every row absolutely, using top to place it at the correct offset inside a tall scrolling container.

Without applying style, all rows would stack at the same position and the virtualization would visually collapse.

The single most common react-window mistake is omitting the style prop on the row. The list will appear broken, with rows overlapping at the top and scrolling behaving incorrectly.

Always spread or assign the provided style onto the outermost element of your row to keep positioning correct.

Rather than closing over your array inside the render function, you can pass it through the itemData prop. react-window then forwards it to the row as a data field alongside index and style.

This keeps the row component decoupled and can help with memoization, since the row receives its data explicitly.

FixedSizeList supports horizontal lists via the layout prop set to horizontal, or by using the direction options depending on version. itemSize then represents width instead of height.

This is handy for horizontally scrolling carousels or timelines that also contain many items.

The overscanCount prop renders a few extra rows just outside the visible window. This buffer reduces the chance of seeing blank space during fast scrolling before new rows mount.

A small overscan smooths the experience, while a large one wastes the benefit by mounting too many off-screen rows.

FixedSizeList needs explicit pixel dimensions, which is awkward in responsive layouts. The companion AutoSizer component measures its parent and supplies width and height to the list via a render prop.

Wrapping the list in AutoSizer lets it fill a flexible container without you hardcoding sizes, adapting as the layout changes.

A working FixedSizeList sets height, width, itemCount, and itemSize, and renders rows through a children function that applies the style prop. Optionally AutoSizer feeds it dimensions and overscanCount adds a buffer.

With this in place, a list of any length keeps only the visible rows mounted while scrolling stays smooth.

Recall what FixedSizeList must be told to render rows correctly.

FixedSizeList renders equal-height rows using height, width, itemCount, itemSize, and a children render function that receives index and style. Applying the style prop is mandatory, or rows overlap.

Pass data via itemData, support horizontal layout, add a small overscanCount buffer, and use AutoSizer to fill responsive containers without hardcoding dimensions.