Intermediate LevelReact JS & React 19
How do list virtualization libraries (TanStack Virtual) render massive datasets?
❓ Interview Prompt: Explain List Virtualization (Windowing), rendering only visible viewport items, fixed row heights, and performance from 10,000 items to 20 DOM nodes.
Rendering 10,000 list items creates thousands of DOM nodes, causing memory exhaustion and browser scroll lag. List Virtualization (Windowing) renders ONLY the items currently visible in the scroll viewport (plus a small buffer):
How It Works:
Calculates total container scroll height dynamically, but instantiates only ~20 active DOM nodes positioned absolutely based on scroll offset. As the user scrolls, DOM nodes are recycled instantly!
Code Implementation Example
jsx
import { useVirtualizer } from '@tanstack/react-virtual';
function VirtualList({ items }) {
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 35,
});
return (
<div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
<div style={{ height: '${rowVirtualizer.getTotalSize()}px', position: 'relative' }}>
{rowVirtualizer.getVirtualItems().map(virtualRow => (
<div key={virtualRow.index} style={{
position: 'absolute',
top: 0,
transform: 'translateY(${virtualRow.start}px)'
}}>
{items[virtualRow.index]}
</div>
))}
</div>
</div>
);
}💡Virtualizing 10,000 items into visible viewport nodes using TanStack Virtual.
🎯 Interview Key Takeaway
Use list virtualization to render datasets with thousands of items by rendering only DOM nodes visible in the scroll viewport.
#Virtualization#Windowing#TanStack Virtual#Performance#Intermediate
Back to all React JS & React 19 Questions→