CodeParkVirtualization, also called windowing, renders only the rows you can see in the scroll container. It also renders a few extra rows above and below, called overscan.
A spacer element, or rows with absolute positions, gives the container its full height. So the scrollbar behaves as if every row existed. As the user scrolls, rows are swapped in and out.
With 10,000 items you might keep only about 30 in the DOM. That makes the first render, updates and memory use far cheaper. Libraries include react-window and TanStack Virtual (useVirtualizer).
Trade-offs:
- The browser's find-in-page cannot see rows that are not rendered.
- Rows with dynamic heights must be measured.
- Accessibility needs care, because screen readers only see the rendered rows.
- Restoring the scroll position takes extra work.
For a few hundred simple rows, it is often unnecessary.
- Virtualization renders only the visible rows, plus a few extra called overscan.
- A spacer keeps the full scroll height.
- Far fewer DOM nodes means faster renders and less memory.
- Popular libraries are
react-windowand TanStack Virtual. - The costs are broken find-in-page, measuring dynamic heights, and extra accessibility work.