What does "windowing" / "virtualization" do?

ReactMiddle~3 min read

What windowing / virtualization is

Windowing (virtualization) is a technique where React renders only the visible part of a list (that is, a "window") and a few elements around it - and everything else is never created in the DOM until you scroll to it.

An intuitive example:

Imagine you have a list of 10,000 items.

Without virtualization:

React creates all 10,000 items in the DOM.
That's tens of thousands of nodes, CSS styles, layout passes, event listeners.
Rendering slows down, memory fills up, FPS drops.

With virtualization:

The DOM contains only, say, 30 items - the ones visible on screen plus a small "buffer" above and below.
When the user scrolls, the "window" shifts, old items are removed from the DOM, and new ones are added.
Visually, it creates the illusion of an infinite list.

Why this is fast

Fewer DOM nodes → less work for the browser.
Less memory → less GC (garbage collection).
Fewer React renders → less reconciliation.
Limited layout recalculation (reflow) and repaint.

In other words, React always works with only a small part of the list (the window), not the entire tree.

What this looks like conceptually

javascript

+-----------------------------------------+
| (invisible part, elements not in DOM)   |
|-----------------------------------------|
| item 95                                 |
| item 96                                 |
| item 97 ← start of window               |
| item 98                                 |
| item 99                                 |
| item 100 ← end of window                |
|-----------------------------------------|
| (invisible part, elements not in DOM)   |
+-----------------------------------------+

As you scroll, the window "crawls" down, React updates the element indexes, but does not keep the whole list in memory.

Example: without and with windowing

Without virtualization

javascript

function List({ items }) {
  return (
    <div>
      {items.map((item, i) => (
        <div key={i}>{item}</div>
      ))}
    </div>
  );
}

→ If items.length = 10_000, React will create 10,000 <div>s, which is bad for the browser.

With virtualization (react-window)

javascript

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

function VirtualizedList({ items }) {
  return (
    <List
      height={500}         // height of the visible area
      itemCount={items.length} // total number of items
      itemSize={35}        // height of one item
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>{items[index]}</div> // style positions the item
      )}
    </List>
  );
}

react-window itself computes which indexes are currently visible and draws only those (for example, 100 through 130).

The "window" = the list's viewport

The browser sees only part of the content → virtualization creates the illusion of a full list, while what's actually rendered is a window of a few elements.

You can control:

overscanCount - how many elements above and below to keep "in reserve";
itemSize or a dynamic getItemSize - the height of an item;
VariableSizeList - for items with different heights.

Libraries that use windowing

Library	Features
react-window	Lightweight, fast, simple (FixedSize/VariableSize)
react-virtualized	Older, powerful, supports tables, grids, and autoSizer
@tanstack/react-virtual	A modern, headless, flexible implementation
FlatList (React Native)	Windowing implementation for RN
VirtualScroller (Web API)	A native experimental equivalent

When to use virtualization

Required:

for lists with more than 100-200 items, especially if each item is heavy;
for tables with hundreds of rows;
for "infinite feeds" (chat, feed, catalogs).

Not needed:

when there are few items (up to ~50);
when the list frequently adds/removes items in the middle (recalculating the window costs more than it saves);
when precise layout matters (for example, masonry, a grid with dynamic width).

Summary

Without virtualization	With virtualization
All items in the DOM	Only visible items
Slow at 1000+	Fast even at 100,000
Large memory footprint	Small memory footprint
Complex re-renders	Minimal updates
Simple implementation	Requires a library or custom logic

Virtualization = "show only what the user actually sees" (plus a couple of rows above/below for smoothness).

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.