Suggest an edit

Improve this article

Refine the answer for “What does "windowing" / "virtualization" do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts695 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.