Why virtualize
Rendering ten thousand rows creates ten thousand DOM nodes, which floods memory and makes scrolling jank. Virtualization renders only the rows in or near the viewport and reuses nodes as you scroll.
- The DOM holds a small window of rows plus a small overscan buffer
- A spacer element preserves the full scroll height so the scrollbar is correct
- As the user scrolls, rows are recycled to show new data
Fixed versus variable heights
With fixed row heights, the visible range is a simple division of scroll position by row height. With variable heights you must measure rows and keep a running offset map, often refined as items render.
Scroll to render loop
Hard parts
- Overscan a few rows above and below to avoid blank flashes during fast scrolls
- Restore scroll position correctly when data changes or rows resize
- Keep focus and selection stable as nodes recycle
- Support sticky headers and grouped rows without breaking offsets
Key idea
Virtualization renders only a small window of rows with overscan over a full height spacer, recycling DOM nodes and measuring variable heights so massive lists scroll smoothly.