List Virtualization: Render the Window, Not the World

WHY IT EXISTS Browsers are slow at rendering and managing thousands of DOM nodes. Attempting to render a list of 10,000 items at once causes the UI to freeze, consumes significant memory, and results in a poor user experience. Virtualization was created to solve this performance bottleneck for large datasets.

THE MENTAL MODEL Think of a long list as a film reel and the screen as the projector's gate. The projector only shows one frame at a time, not the entire reel. Virtualization does the same for your list: it renders only the items that fit in the visible "window" on screen, plus a small buffer. As you scroll, it recycles DOM nodes, replacing the content of items moving out of view with the content of items moving into view.

HOW IT WORKS A virtualization library calculates which items should be visible based on the container's size, the scroll position, and the height of each item. It then creates a small, fixed number of DOM elements. As the user scrolls, it doesn't create new elements. Instead, it updates the style (e.g., top, transform) and content of the existing elements, moving them into the correct position. A large, empty spacer element is used to make the browser's native scrollbar reflect the full (virtual) height of the list.

WHEN TO USE IT Use virtualization when rendering lists with hundreds or thousands of items. This is common in social media feeds, chat histories, large dropdowns, data grids, and developer tools showing logs or component trees. If you hear "the page freezes when the list gets long," virtualization is the solution.

WHEN NOT TO USE IT Avoid virtualization for small lists (e.g., under 100 items), as the library's overhead can be more costly than simply rendering everything. It's also difficult to implement with items that have very dynamic, unpredictable heights or when you need browser find (Ctrl+F) to work on the entire list, as non-rendered items are not in the DOM.

ONE CANONICAL EXAMPLE The react-window library is a prime example. To render a list of 10,000 rows, you provide rowCount={10000}, rowHeight={35}, and a single Row component. The library then calls your Row component about 20 times with different index and style props to fill the visible viewport, creating a fast, scrollable list with a tiny DOM footprint.