Virtualizing Large Lists in React Applications

When building data-heavy dashboards or feeds, rendering thousands of DOM nodes at once will slow down your application. react-virtualized, react-window, and react-virtual solve this by only rendering the items currently visible on the screen. While they share the same goal, their architectures and maintenance status differ significantly. Let's compare how they handle common engineering challenges.

🏗️ Architecture & API Style: Components vs Hooks

react-virtualized relies on heavy class-based components.

• You import specific components like <List> or <Grid>.
• Props are passed directly to configure behavior.
• Less flexible for custom DOM structures.

// react-virtualized: Component-based
import { List } from 'react-virtualized';

<List
  width={600}
  height={400}
  rowCount={1000}
  rowHeight={50}
  rowRenderer={({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
/>

react-window uses function components with a render prop pattern.

• You wrap your items in <FixedSizeList> or <VariableSizeList>.
• The child function provides index and style.
• Cleaner API but still component-bound.

// react-window: Component with render prop
import { FixedSizeList } from 'react-window';

<FixedSizeList
  width={600}
  height={400}
  itemCount={1000}
  itemSize={50}
>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</FixedSizeList>

react-virtual provides a headless hook.

• You call useVirtualizer to get virtual items.
• You map over the items and apply styles manually.
• Maximum flexibility for custom layouts.

// react-virtual: Hook-based
import { useVirtualizer } from '@tanstack/react-virtual';

const virtualizer = useVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 50,
});

return (
  <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
    <div style={{ height: virtualizer.getTotalSize() }}>
      {virtualizer.getVirtualItems().map((virtualItem) => (
        <div key={virtualItem.key} style={{ transform: `translateY(${virtualItem.start}px)` }}>
          Row {virtualItem.index}
        </div>
      ))}
    </div>
  </div>
);

📏 Handling Container Sizes: Built-in vs External

Resizing the virtual list when the window or container changes is a common requirement.

react-virtualized includes <AutoSizer> out of the box.

• Wraps the list and passes width/height props.
• Convenient but adds bundle weight even if unused elsewhere.

// react-virtualized: Built-in AutoSizer
import { List, AutoSizer } from 'react-virtualized';

<AutoSizer>
  {({ height, width }) => (
    <List
      width={width}
      height={height}
      rowCount={1000}
      rowHeight={50}
      rowRenderer={({ index, style }) => (
        <div style={style}>Row {index}</div>
      )}
    />
  )}
</AutoSizer>

react-window requires a separate package.

• You must install react-virtualized-auto-sizer.
• Keeps the core library lightweight.
• API is nearly identical to the legacy version.

// react-window: External AutoSizer
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

<AutoSizer>
  {({ height, width }) => (
    <FixedSizeList
      width={width}
      height={height}
      itemCount={1000}
      itemSize={50}
    >
      {({ index, style }) => (
        <div style={style}>Row {index}</div>
      )}
    </FixedSizeList>
  )}
</AutoSizer>

react-virtual handles resizing via observers.

• The hook uses ResizeObserver internally.
• No extra wrapper component needed.
• You just need a ref on the scrollable parent.

// react-virtual: Observer-based
import { useVirtualizer } from '@tanstack/react-virtual';

const parentRef = useRef(null);

const virtualizer = useVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 50,
  // ResizeObserver is handled internally
});

return (
  <div ref={parentRef} style={{ overflow: 'auto' }}>
    {/* Virtual items rendered here */}
  </div>
);

🛠️ Maintenance & Future Proofing

Long-term support is critical when choosing infrastructure libraries.

react-virtualized is in maintenance mode.

• The original author recommends react-window for new work.
• Bugs are fixed, but no new features are added.
• Larger bundle size due to legacy code.

// react-virtualized: Legacy status
// ⚠️ Not recommended for new projects
import { List } from 'react-virtualized';

react-window is actively maintained.

• Designed as the modern replacement for react-virtualized.
• Stable API with focused scope.
• Best choice for standard React lists and grids.

// react-window: Active standard
// ✅ Recommended for React-specific projects
import { FixedSizeList } from 'react-window';

react-virtual is part of the TanStack ecosystem.

• Actively developed alongside TanStack Table and Query.
• Framework-neutral (works with Solid, Vue, Svelte).
• Best choice for custom needs or multi-framework teams.

// react-virtual: Modern headless
// ✅ Recommended for custom layouts or non-React frameworks
import { useVirtualizer } from '@tanstack/react-virtual';

🤝 Similarities: Shared Ground Between Libraries

Despite their differences, all three libraries solve the same core problem using similar underlying math.

1. 📉 DOM Reduction

• All three only render visible rows.
• Keeps the DOM light even with 10,000+ items.

// All libraries: Render only visible items
// Instead of 1000 divs, only ~10 are in the DOM

2. 📍 Absolute Positioning

• Items are positioned using transform or top/left.
• Ensures smooth scrolling without layout thrashing.

// All libraries: Use inline styles for position
style={{ transform: `translateY(${offset}px)` }}

3. 🔄 Scroll Event Listening

• All attach listeners to the scroll container.
• Calculate visible range based on scroll offset.

// All libraries: Listen to scroll events
// Internal logic calculates startIndex and endIndex

📊 Summary: Key Differences

💡 The Big Picture

react-virtualized is the legacy option 🕰️ — avoid it for new work unless you are stuck maintaining old code. It has too much weight for modern apps.

react-window is the standard choice 🏆 for React projects — it is light, stable, and does exactly what most teams need without extra complexity.

react-virtual is the flexible choice 🛠️ for custom needs — use it if you need headless logic, custom layouts, or support for frameworks beyond React.

Final Thought: For most React developers, react-window offers the best balance of performance and ease of use. If you need more control or framework neutrality, react-virtual is the modern alternative.