React Window Virtualization: a Practical react-window Tutorial for Fast Lists

If your UI contains a “simple” list of 10,000 rows, React will faithfully try to render… 10,000 rows.
Your browser will then faithfully try to keep that many DOM nodes around. And your users will faithfully
wonder why the page scrolls like it’s wading through syrup.

That’s where react-window
comes in. It’s a small, focused library for React window virtualization (also called “windowing”):
you render only what’s visible (plus a small buffer), and you fake the rest with a spacer.

In this guide you’ll get react-window installation, react-window setup, a solid
react-window example for React,
plus the practical bits people usually discover at 2 a.m.: item sizing, scroll performance, and how to bolt on
React infinite scroll without turning your codebase into interpretive art.

What “virtualized list” means (and why it fixes scroll performance)

A React virtualized list renders only the rows that are currently in (or near) the viewport.
Instead of creating thousands of DOM nodes, it creates maybe 20–60, depending on your list height and overscan.
The rest is represented by padding/positioning so the scrollbar still behaves like the full list exists.

This is not a micro-optimization. It’s a fundamental shift in work: fewer DOM nodes, fewer layout calculations,
less memory pressure, and far fewer React component trees to reconcile. The result is immediate:
better React scroll performance and fewer “why is my laptop fan auditioning for takeoff?” moments.

You typically need virtualization when you do React large list rendering (thousands of rows),
when each row is non-trivial (avatars, badges, conditional layouts), or when the list updates frequently.
If your list is 50 items, virtualization may be unnecessary overhead—use your judgement, not your fear.

react-window installation and setup (the part you shouldn’t overthink)

Let’s do the react-window getting started basics. Install the package, then pick the component
that matches your sizing needs: react-window FixedSizeList for uniform row heights, or
react-window VariableSizeList for rows with different heights.

# react-window installation
npm i react-window

# or
yarn add react-window

# or
pnpm add react-window

For most apps, react-window setup boils down to two non-negotiables:
you must give the list a height and a width (numbers or CSS-driven via parent),
and each row must be positioned using the style object provided by react-window.
Ignore that style, and you’ll get a stack of rows on top of each other—modern art, but not UI.

If you want a second opinion or a parallel walkthrough, the Dev.to article

getting started with react-window

covers the same core idea: render less, scroll more smoothly.

FixedSizeList tutorial: the fastest “virtualized list” you can ship

FixedSizeList is the best default: it’s simple, predictable, and fast because every item has the
same height. If your design allows consistent row height (even if content varies), choose this and move on with your life.

Here’s a compact react-window tutorial example. Notice three things:
(1) height defines the viewport height,
(2) itemSize is a number (row height),
(3) we apply the injected style to the row container.

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

const Row = memo(function Row({ index, style, data }) {
  const item = data[index];

  return (
    <div style={style} className="row">
      <strong>#{index}</strong> {item.label}
    </div>
  );
});

export default function FixedListExample() {
  const items = Array.from({ length: 10000 }, (_, i) => ({ label: `Item ${i}` }));

  return (
    <List
      height={480}
      width={"100%"}
      itemCount={items.length}
      itemSize={44}
      itemData={items}
      overscanCount={6}
    >
      {Row}
    </List>
  );
}

This is the canonical React list component pattern with react-window:
pass the dataset via itemData, keep rows cheap, and use memo to avoid re-rendering
every visible row when unrelated state changes. That last part is optional—until it isn’t.

VariableSizeList: dynamic row heights without ruining performance

VariableSizeList exists for one reason: real-world content. Some rows are taller (wrapped text, expanded details),
others are shorter. With variable heights you provide an itemSize(index) function instead of a fixed number.

The catch is caching. react-window caches measurements for performance. If an item’s height changes after render
(expand/collapse, images loading, responsive layout), you must tell the list to reset its internal cache.
Otherwise you’ll see weird overlaps, incorrect scroll positions, or blank gaps—classic symptoms that look like a CSS bug, but aren’t.

In practice, you keep a ref to the list and call resetAfterIndex. You don’t need to reset everything
on every render; do it when sizes actually change.

import React, { useMemo, useRef } from "react";
import { VariableSizeList as List } from "react-window";

export default function VariableListExample({ rows }) {
  const listRef = useRef(null);

  const getItemSize = (index) => {
    const row = rows[index];
    return row.expanded ? 120 : 52;
  };

  const itemData = useMemo(() => ({
    rows,
    onToggle: (index) => {
      rows[index].expanded = !rows[index].expanded;
      // If you're using immutable state, toggle via setState and call reset in an effect.
      listRef.current?.resetAfterIndex(index, true);
    }
  }), [rows]);

  return (
    <List
      ref={listRef}
      height={520}
      width={"100%"}
      itemCount={rows.length}
      itemSize={getItemSize}
      itemData={itemData}
      overscanCount={4}
    >
      {({ index, style, data }) => {
        const row = data.rows[index];
        return (
          <div style={style}>
            <button onClick={() => data.onToggle(index)}>
              {row.expanded ? "Collapse" : "Expand"}
            </button>
            <div>{row.title}</div>
          </div>
        );
      }}
    </List>
  );
}

If your row height depends on measured DOM (not just state), you’ll need a measurement strategy
(e.g., ResizeObserver) and you’ll still end up calling resetAfterIndex.
That’s not react-window being annoying; it’s the price of fast math during scrolling.

React infinite scroll with react-window (without a dependency spiral)

Virtualization solves “render too many nodes.” Infinite scrolling solves “load too much data.”
They work well together, but only if you’re clear about responsibilities: react-window controls what is rendered;
your code controls what is fetched and when.

The simplest pattern: watch the visible range via onItemsRendered and fetch the next page when the user
approaches the end of the loaded items. While fetching, temporarily expose one extra “loading” row so the user gets feedback.
This keeps your react-window example self-contained and avoids overengineering.

Here’s a minimal approach you can adapt. It’s intentionally boring—boring code ships and debugs well.

import React, { useCallback, useEffect, useState } from "react";
import { FixedSizeList as List } from "react-window";

export default function InfiniteWindowList({ fetchPage }) {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    (async () => {
      setLoading(true);
      const { data, next } = await fetchPage();
      setItems(data);
      setHasMore(Boolean(next));
      setLoading(false);
    })();
  }, [fetchPage]);

  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;
    setLoading(true);
    const { data, next } = await fetchPage();
    setItems((prev) => prev.concat(data));
    setHasMore(Boolean(next));
    setLoading(false);
  }, [fetchPage, hasMore, loading]);

  const itemCount = hasMore ? items.length + 1 : items.length;

  return (
    <List
      height={520}
      width={"100%"}
      itemCount={itemCount}
      itemSize={48}
      onItemsRendered={({ visibleStopIndex }) => {
        // Fetch when user is close to the end (tune the threshold)
        if (visibleStopIndex >= items.length - 10) loadMore();
      }}
      itemData={{ items, loading, hasMore }}
    >
      {({ index, style, data }) => {
        const isLoaderRow = index >= data.items.length;
        return (
          <div style={style}>
            {isLoaderRow ? (data.loading ? "Loading…" : "Scroll to load more") : data.items[index].label}
          </div>
        );
      }}
    </List>
  );
}

If you later need more robust behaviors (placeholder rows, cached pages, request de-duplication),
you can introduce a dedicated infinite-loader helper. But the core idea stays the same:
fetch based on viewport proximity, not on “user reached absolute bottom pixel.”

React performance optimization checklist (the stuff that actually moves the needle)

Virtualization is a big win, but it’s not a magic spell. You can still tank performance if each visible row is expensive,
if you pass unstable props that trigger re-renders, or if you do heavy work during scrolling.
Think of react-window as your “render fewer things” lever—and then make each rendered thing cheap.

For React performance optimization, the highest ROI is usually stabilizing renders:
memoize row components (React.memo), keep itemData stable (useMemo),
and avoid creating new inline functions per row unless you must.
Also: do not run layout-thrashing code in the row render (measuring DOM, forcing reflow, etc.).

When React scroll performance is still not smooth, the culprit is often outside react-window:
large images without constraints, expensive CSS (shadows/filters), or state updates firing on every scroll tick.
Use profiling tools, not vibes. If you only remember one thing: keep rows simple, and keep updates localized.

1. Keep row markup minimal: reduce nesting, avoid heavy effects during scroll.
2. Stabilize props: memoize itemData, use React.memo for rows.
3. Use the right list: FixedSizeList first; VariableSizeList only when necessary.
4. Tune overscan: increase a bit for smoother fast scrolling, decrease if CPU spikes.
5. Measure the right thing: profile commits/renders, not just FPS.

Common gotchas (a.k.a. “why is my list blank?”)

Most “react-window is broken” bugs come down to one of three issues: missing dimensions, ignoring the row style,
or CSS conflicts (e.g., rows set to position: static overrides, or parent containers with unexpected overflow rules).
react-window relies on deterministic positioning; let it do its job.

Another frequent surprise: lists inside flex layouts. If the list’s parent doesn’t have a computable height,
height becomes effectively “0,” and nothing renders. Fix the layout (explicit height, or a container that fills the viewport),
then the list becomes visible—like magic, except it’s just CSS.

Finally, don’t confuse “virtualization” with “pagination.” A virtualized list can still hold 100k items in memory if you load them.
If data volume is large, combine React virtualized list rendering with server-side pagination or
React infinite scroll to keep both DOM and memory under control.

• Nothing renders: check height/width and parent layout.
• Rows overlap: you forgot to apply the provided style.
• Weird spacing in VariableSizeList: call resetAfterIndex after size changes.
• Janky scroll: make rows cheaper; reduce expensive CSS; profile re-renders.

FAQ

What is react-window and when should I use it?

react-window is a small library that implements
list and grid virtualization (windowing). Use it when large list rendering causes slow scrolling, high memory use,
or noticeable input lag. If you’re rendering thousands of items, it’s usually worth it.

What’s the difference between FixedSizeList and VariableSizeList?

FixedSizeList assumes every row is the same height, which makes it simpler and faster.
VariableSizeList supports varying heights via an itemSize(index) function, but you must reset cached
measurements when item heights change (typically with resetAfterIndex).

How do I combine react-window with infinite scroll?

Use onItemsRendered to detect when the user is near the end of the currently loaded items, then fetch the next page.
While loading, temporarily add a “loading row” by increasing itemCount so the UI stays responsive and predictable.

Extended Semantic Core (clustered)

The table below is an expanded semantic ядро based on your seed keywords. It’s grouped by intent/meaning so you can reuse it
for on-page SEO, internal linking, and future supporting articles.

Popular user questions (for PAA/FAQ planning)

Below are common “People Also Ask”-style questions and forum-like queries that typically appear around this topic.
Pick the most relevant for your product context; three are already implemented in the FAQ above.

Backlinks (anchored with your key phrases)

Use these as outbound references (and as a model for internal linking). Anchors intentionally match your target queries:
react-window,
react-window FixedSizeList,
react-window VariableSizeList,
react-window installation,
react-window getting started.