React Virtualization: A Practical Guide to react-window vs. Virtuoso

I recently profiled a dashboard where a “simple” activity feed, when populated with several thousand items, was taking over ten seconds to render and frequently crashing the browser tab. The developer’s approach was standard — map over an array and render a component for each item — but this pattern genuinely falls apart at scale. The DOM becomes bloated, and the browser’s render engine gives up.

This is where virtualization becomes essential, but choosing the right tool is critical. Simply picking one without understanding the specific problem you are solving can lead to a different set of frustrations.

Symptom #1: The Initial Page Load is Extremely Slow

Likely Cause: You are rendering thousands of DOM nodes upfront when the user can only see a handful at a time. The browser is spending an enormous amount of time on layout and paint for elements that are not even in the viewport, which is pure waste.

The Virtualization Fix: The core principle of virtualization is to render only the items currently visible in the “window” (the viewport). The most direct, low-level solution for this is react-window. It is extremely lightweight and unopinionated. For a simple list where every item has the same, known height, it is a perfect, high-performance fix.

import { FixedSizeList } from 'react-window';

// Each item is exactly 50px tall
const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const MyList = () => (
  <FixedSizeList
    height={500}
    width={300}
    itemCount={10000}
    itemSize={50}
  >
    {Row}
  </FixedSizeList>
);

By providing a fixed itemSize, react-window can perform simple math to calculate which items to render and where to position them within a scrollable container. This is genuinely effective for simple, uniform lists.

Symptom #2: My List Items Have Different Heights and It’s Breaking the Layout

Likely Cause: You have tried using react-window’s VariableSizeList, but it requires you to provide a function that returns the height of each item by its index. In many real-world applications (like a chat UI or social media feed), you simply do not know the height of an item until it has actually rendered. Trying to pre-calculate this is complex and often inaccurate.

The Virtualization Fix: This is the exact problem Virtuoso was built to solve, and it is its primary advantage. Virtuoso does not require you to know item heights in advance. It renders items, measures their actual height in the DOM, and then adjusts the layout accordingly. The API is simpler because the hardest part is handled for you.

import { Virtuoso } from 'react-virtuoso';

// Heights can be anything, Virtuoso will measure them.
const MyList = () => (
  <Virtuoso
    style={{ height: '500px' }}
    totalCount={10000}
    itemContent={index => <div>Item {index}</div>}
  />
);

For any list with dynamic content, Virtuoso provides a vastly superior developer experience and is the tool I now reach for by default in these situations.

Symptom #3: My Infinite Scroll is Janky and Hard to Manage

Likely Cause: You are either appending new items to an ever-growing list (which defeats virtualization and leads back to DOM bloat) or your logic for fetching data, showing loading states, and preserving scroll position is becoming a complex state management nightmare.

The Virtualization Fix: Both libraries can handle this, but Virtuoso’s implementation is more integrated. With react-window, you typically need another package like react-window-infinite-loader to coordinate data fetching. This works, but it’s another dependency and more wiring.

Virtuoso includes this functionality out of the box. Its API provides props like endReached to trigger data fetching and a Footer component to seamlessly render a loading spinner, making the implementation genuinely straightforward.

// Virtuoso handles the loading state declaratively
<Virtuoso
  style={{ height: '500px' }}
  totalCount={items.length}
  itemContent={index => <div>{items[index]}</div>}
  endReached={loadMore}
  Footer={() => <div style={{ padding: '2rem' }}>Loading...</div>}
/>

Symptom #4: My Virtualized List is Invisible or Doesn’t Scroll

Likely Cause: This is almost always a CSS problem, and it is the most common setup mistake I encounter. Virtualization libraries need a parent container with a defined, bounded height to function as the “window.” If the parent’s height is auto or not constrained, the library cannot calculate which items are visible and will often render nothing.

The Virtualization Fix: Ensure the component you pass to your virtualization library has a specific height. This can be a pixel value, a vh unit, or flex: 1 within a parent that uses display: flex. The key is that the height cannot be determined by the content, because the whole point is to not render all the content.

/* The container MUST have a defined height */
.list-container {
  display: flex;
  flex-direction: column;
  height: 80vh; /* Or a fixed pixel height */
}

/* The Virtuoso/react-window component can then fill this space */
.virtuoso-component {
  flex: 1;
}

Stating this directly: if your list isn’t showing up, check the parent element’s CSS height property first.

A Practical Decision Framework

What Changed When I Stopped Fighting with Item Heights

For a long time, I treated react-window as the default and tried to force it to work for dynamic lists, building complex systems with ResizeObserver to measure items and feed those heights back into the component. It was brittle and complex. The moment I switched to Virtuoso for a feed component with user-generated content, I deleted hundreds of lines of that complex measurement code. The component just worked.

My mental model is now simple: react-window is a fantastic low-level primitive for when I can guarantee a simple, fixed-height layout. For everything else — which is most modern front-end work — I start with Virtuoso and save myself the headache.

Are you struggling with a specific long-list rendering problem? Describe the data structure and layout requirements, and I can help you decide which tool is the right fit.