List Virtualization: Render the Window, Not the World
Virtualization renders only the visible "window" of a long list, not the entire dataset. It's essential for performance in feeds or tables with thousands of rows.
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.
Interview question
Which statement best describes how list virtualization optimizes performance for large datasets?
- a.It creates new DOM elements only for visible items and destroys them when they scroll out of view.
- b.It loads data in batches as the user scrolls, minimizing initial data transfer.
- c.It renders all items but hides those outside the visible viewport using CSS.
- d.It reuses a fixed number of DOM elements, updating their content and position as items scroll into and out of view.Correct
Why? this is the answer
The card explains that virtualization "recycles DOM nodes, replacing the content of items moving out of view with the content of items moving into view" and "updates the style... and content of the existing elements." Option B describes infinite scrolling, which focuses on data fetching, not DOM management, and option A incorrectly suggests constant creation/destruction rather than efficient recycling.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles