List Virtualization & Windowing Internals
List Virtualization (Windowing) renders only the small subset of DOM nodes currently visible in the scroll viewport (plus a tiny overscan buffer), recycling DOM elements as the user scrolls through datasets of 100,000+ items.
Why it matters in interviews
Visual & Interactive Explanation
Live DOM Virtualization Inspector
Windowing 100,000 Flight Records into 15 Active DOM Nodes
100,000 rows
10 nodes only
#0 – #9
0px / 4400000px
Key Takeaway for Interviews: Virtualization creates a fixed-size DOM buffer (~15 items) and mathematically positions rows via transform: translateY(offset) while the user scrolls through 100k records at 60 FPS without memory explosion.
Code Examples & Implementation
function useVirtualizer({
count,
itemHeight,
viewportHeight,
scrollTop,
overscan = 3,
}: {
count: number;
itemHeight: number;
viewportHeight: number;
scrollTop: number;
overscan?: number;
}) {
const totalHeight = count * itemHeight;
const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
const endIndex = Math.min(
count - 1,
Math.floor((scrollTop + viewportHeight) / itemHeight) + overscan
);
const virtualItems = [];
for (let i = startIndex; i <= endIndex; i++) {
virtualItems.push({
index: i,
offsetTop: i * itemHeight,
height: itemHeight,
});
}
return { totalHeight, virtualItems, startIndex, endIndex };
}Interview-Ready Answers
Virtualization renders only visible DOM nodes in the viewport. As the user scrolls, off-screen nodes are removed and new items are rendered into existing recycled slots, keeping DOM nodes under 30 even for 100,000 items.
Official Documentation & Specifications
Follow-up Questions & Deep Dives
Common Mistakes & Anti-Patterns
- Using array index as key when recycling virtualized row components
- Not including an overscan buffer, causing white flash during fast scrolling
- Attempting fixed-height math on dynamic multi-line content without measurement caches
Real-World Architectural Scenario
You receive 50,000 real-time flight records via WebSocket with frequent price updates. Rendering freezes the browser. How do you design the UI?
Rate Your Readiness
Rate how comfortably you can explain this in an interview to update your global readiness gauge: