📏 VariableSizeList: Handling Dynamic Heights

The real world is inconveniently full of lists where items don’t have
uniform heights: comment threads, chat messages, product cards with varying
description lengths, news feeds. For these scenarios,
react-window VariableSizeList is the right
tool. It works the same way as FixedSizeList but instead of a
number, itemSize accepts a function that takes an
index and returns the height of that specific item.

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

// Pre-computed heights for each item
const itemHeights = items.map(item =>
  item.expanded ? 120 : item.hasImage ? 80 : 48
);

const getItemSize = (index) => itemHeights[index];


  height={600}
  itemCount={items.length}
  itemSize={getItemSize}    // function, not a number
  width={'100%'}
  estimatedItemSize={60}  // helps with scrollbar accuracy
>
  {Row}

There’s a subtlety here that trips up most developers the first time:
VariableSizeList caches the sizes it receives. If item
heights change at runtime (say, the user expands an accordion), you need
to explicitly tell the list to invalidate its cache by calling
listRef.current.resetAfterIndex(index). Without this call,
the list will render items with stale position offsets, and your layout
will look like it was assembled during an earthquake.

import { useRef, useCallback } from 'react';
import { VariableSizeList } from 'react-window';

function AccordionList({ items }) {
  const listRef = useRef(null);
  const [expandedIndex, setExpandedIndex] = useState(null);

  const getSize = useCallback(
    (i) => i === expandedIndex ? 200 : 52,
    [expandedIndex]
  );

  const toggleItem = useCallback((index) => {
    setExpandedIndex(prev => prev === index ? null : index);
    // Reset from this index downward
    listRef.current?.resetAfterIndex(index);
  }, []);

  return (
    
      ref={listRef}
      height={500}
      itemCount={items.length}
      itemSize={getSize}
      width={'100%'}
      itemData={{ items, expandedIndex, onToggle: toggleItem }}
    >
      {AccordionRow}
    
  );
}

The estimatedItemSize prop deserves special attention. It
doesn’t affect rendering correctness, but it does affect scrollbar
accuracy. Without it, the scrollbar thumb size and position may jump
erratically as new items are measured and the total height estimate
updates. Set it to a reasonable average height for your data. If your
items have genuinely unpredictable heights (because they’re determined by
rendered content), consider the
CellMeasurer pattern
from the react-virtualized ecosystem, or a custom
ResizeObserver-based solution to measure items after mount.

🚀 Squeezing More Performance Out of react-window

Using react-window
already delivers enormous React performance
optimization benefits out of the box. But there are several
additional techniques that push
React scroll performance to the theoretical
maximum, particularly when your row components are non-trivial.

Memoize Everything That Moves

Wrap row components in React.memo and stabilize all
functions you pass via itemData with useCallback.
Wrap the itemData object itself in useMemo so it
doesn’t produce a new reference on every parent render. This sounds tedious
but it’s the difference between 60fps scroll and 30fps scroll when rows
contain images, charts, or anything computationally heavier than a

import { memo, useMemo, useCallback } from 'react';

// ✅ Memoized row component
const Row = memo(({ index, style, data }) => {
  const { items, onSelect } = data;
  return (
     style={style} onClick={() => onSelect(items[index].id)}>
      {items[index].name}
    

Tuning overscanCount

The overscanCount prop controls how many rows beyond the
visible area react-window pre-renders. The default is 1–2. Increasing
it reduces the “flash of empty content” you can sometimes see on very
fast scrolls at the cost of rendering more nodes. On modern hardware,
an overscanCount of 3–5 is a good sweet spot. Going higher
than 10 starts to approach the “render everything anyway” antipattern and
defeats the purpose.

A counterintuitive finding: for very complex row components (think rows
with lazy-loaded images or canvas elements), a lower
overscanCount can sometimes feel smoother. This is because
each new mount triggers layout and paint work. If you’re mounting 10
complex rows simultaneously on every scroll event, the main thread will
stall. Reducing to 2–3 overscan rows means fewer simultaneous mounts,
fewer layout thrashes, smoother scroll. Profile first with React DevTools
Profiler and Chrome’s Performance tab before tuning blindly.

Avoid Inline Styles on Rows

This one is subtle. The style prop react-window gives you
must be applied as-is, but your own additional styles should
come from CSS classes rather than inline style objects. Every inline style
object is a new JavaScript object allocation. In a fast scroll, React
processes hundreds of row renders per second. Creating fresh style objects
for each puts pressure on the garbage collector and adds up to measurable
jank. Maintain your row’s base appearance via className and CSS, and merge
with the style prop only for the unavoidable positioning
values react-window provides.

∞ React Infinite Scroll with react-window

Virtualization and React infinite scroll are
natural companions. Virtualization handles the rendering side — you never
have too many DOM nodes. Infinite scroll handles the data side — you never
load too much data upfront. Together, they let you present arbitrarily
large datasets with buttery performance and minimal memory footprint.

The idiomatic integration point is the onItemsRendered
callback. react-window calls it whenever the set of visible items changes,
providing visibleStartIndex, visibleStopIndex,
overscanStartIndex, and overscanStopIndex. When
visibleStopIndex approaches itemCount - 1, it’s
time to fetch the next page. However, building this logic robustly from
scratch is non-trivial (loading states, deduplication, error handling).
The react-window-infinite-loader library does exactly this
and integrates with react-window’s API without friction.

import InfiniteLoader from 'react-window-infinite-loader';
import { FixedSizeList } from 'react-window';

function InfiniteList({ hasNextPage, isLoading, items, loadMore }) {
  // Total item count includes a placeholder for the loading row
  const itemCount = hasNextPage ? items.length + 1 : items.length;

  const isItemLoaded = (index) => !hasNextPage || index < items.length;

  const Item = ({ index, style }) => {
    if (!isItemLoaded(index)) {
      return  style={style}>Loading…