The problem with long lists
Rendering ten thousand rows means ten thousand DOM nodes, slow mounts, and heavy memory. Windowing, also called virtualization, renders only the rows currently visible in the viewport plus a small buffer.
- A tall spacer element reserves the full scroll height
- Only the window of visible rows exists in the DOM
- As you scroll, rows are recycled with new data and positions
How the window is computed
The list measures the scroll position and the row height to find the first and last visible index. It then renders that slice, absolutely positioned at the right offset.
- Fixed row heights make the math trivial
- Variable heights need measurement or estimation
- An overscan buffer renders a few extra rows to hide blank flashes during fast scrolls
Libraries like react window and react virtual implement this so you do not hand roll the scroll math.
Windowing flow
Key idea
Windowing keeps the DOM small by rendering only the visible slice of a large list over a full height spacer, recycling rows as the user scrolls instead of mounting every item.