ReactJs Performance ~ Virtualization for Large Lists~

Rendering very large lists in React can quickly become a performance bottleneck.

For example, trying to render thousands of items at once often leads to laggy UI or even browser instability.

Virtualization addresses this by limiting how many elements are actually mounted in the DOM.

Instead of rendering the entire list, only the items currently visible in the viewport are rendered, along with a small buffer.

As the user scrolls, items that move out of view are removed, and new ones are mounted dynamically.

This keeps the DOM size small and the rendering cost low.

Libraries like react-window and react-virtualized make it easy to implement this pattern without handling all the edge cases manually.

Normal Rendering

function ItemGrid({ items }) {
  // All items are rendered at once
  return (
    <section>
      {items.map((item) => (
        <ItemCard key={item.id} data={item} />
      ))}
    </section>
  );
}

// Outcome: noticeable delay and UI lag when the list is very large

Virtualized Rendering

import { FixedSizeList as VirtualList } from 'react-window';

function ItemList({ data }) {
  return (
    <VirtualList
      height={700}
      itemCount={data.length}
      itemSize={100}
      width="100%"
    >
      {({ index, style }) => {
        const item = data[index];

        return (
          <div style={style}>
            <ItemCard item={item} />
          </div>
        );
      }}
    </VirtualList>
  );
}

Virtualization Performance (My Perspective)

List Size	Normal Rendering	Virtualized Rendering	Main Benefit	Scrolling Experience
Small lists	Usually acceptable	Slightly more efficient	Limited impact	Smooth
A few hundred rows	Can start feeling heavier	Remains responsive	Noticeable reduction in work	Smooth
Around 1,000 rows	Often slows down	Still stable	Much lower rendering cost	Smooth
Several thousand rows	Performance drops sharply	Handles large datasets well	Major DOM reduction	Mostly smooth
Tens of thousands of rows	Can become impractical	Still usable with tuning	Very high efficiency gain	May depend on row complexity

The exact numbers depend on the browser, row complexity, and component structure, but the overall trend is consistent: virtualization becomes much more valuable as the list grows.

When to virtualise:

• Lists with 50+ items
• Items with moderate-to-high complexity
• Infinite scroll implementations
• Tables with many rows
• Chat message histories

When not to virtualise:

Small lists (fewer than 20 items) – the overhead isn't worth it

• Lists that need to be fully searchable by the browser
• Print-friendly content
• SEO-critical content (virtualised content isn't included in the initial HTML)

One consideration: virtualised lists require fixed or calculated heights. Items with variable heights need React Window's VariableSizeList with a measurement phase, which adds complexity. For most cases, design list items with consistent heights.