The cost of long lists
Rendering ten thousand rows creates ten thousand DOM nodes, which floods layout, paint, and memory. List virtualization renders only the rows currently visible plus a small buffer, no matter how long the list is.
How it works
The technique fakes a full scroll area while mounting just a window of items.
- A tall spacer element gives the scroll container the full height.
- As the user scrolls, the visible window of rows is computed from scroll position.
- Only that window is rendered, absolutely positioned at the right offset.
- An overscan buffer renders a few extra rows above and below to hide pop in.
Watch outs
Virtualization adds real complexity, so apply it only to genuinely large lists.
- Variable row heights need measurement or estimation to place rows correctly.
- Find on page and accessibility can break, since offscreen rows are not in the DOM.
- Sticky headers and keyboard navigation need extra handling.
For a few dozen rows, plain rendering is simpler and fast enough. Reach for virtualization when the row count climbs into the thousands.
Key idea
Render only the visible window plus overscan so a list of any length costs about the same as one screen of rows.