Virtual List (Windowing)
Problem statement
A Virtual List (also called windowing or list virtualization) solves one of the most fundamental performance problems in web development: rendering a list with thousands of items. If you render all 10,000 items to the DOM simultaneously, the browser must create 10,000 DOM nodes — causing a slow initial render, high memory consumption, and janky scrolling. Virtual List solves this by only rendering the items currently visible in the viewport (plus a small buffer), regardless of the total list length.
Your task is to implement a Virtual List from scratch in React that renders a scrollable container with a total height corresponding to all items (so the scrollbar behaves naturally), but only creates DOM nodes for the visible items. As the user scrolls, items entering the viewport are added to the DOM and items leaving it are removed. This is the core technique behind react-window, react-virtualized, and TanStack Virtual.
Requirements & constraints
- Render a scrollable container with 10,000 items
- Only the visible items (plus a small overscan buffer) are rendered as DOM nodes
- The scrollbar height and behavior is correct as if all items were rendered
- Items are positioned absolutely within a full-height wrapper div
- Smooth scrolling with no visible pop-in of items
- Show a counter demonstrating how many DOM nodes are actually active
How to approach Virtual List (Windowing)
The strategy an interviewer expects you to reach for.
Problem Understanding Virtual List is a performance optimization question. The interviewer wants to see that you understand why rendering all 10,000 items is bad, and that you know the specific technique to fix it. Lead with the problem statement: "If I render all 10,000 items, the browser creates 10,000 DOM nodes on initial load. A DOM node is expensive — each one has styles, layout, event listeners, and memory overhead. For 10,000 items, this causes a multi-second initial render and makes scrolling janky. Virtual List solves this by only rendering the ~15 items visible in the viewport."
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.