Virtualized list (windowing)
A huge list that keeps only the visible rows in the DOM, swapping rows as you scroll so thousands of items do not freeze the page.
See it
What it is
A virtualized list renders only the rows in or near the viewport, plus a small overscan buffer. Spacer measurements preserve the full scroll range, and rows are mounted, moved, or recycled as the window changes. That turns a 100,000-row table from 100,000 DOM nodes into perhaps a few dozen. Native lists have worked this way for decades: iOS UITableView recycles cells through dequeueReusableCell, and Android's RecyclerView is named after the same idea.
Reach for windowing when DOM size, layout, or React rendering grows with a genuinely large collection. TanStack Virtual and react-window handle the scroll math; pagination is still simpler when people do not need continuous scrolling.
Gotcha: unmounted rows do not exist for browser Find, selection, printing, or assistive technology to inspect. Dynamic row heights can also make the scroll position jump if measurements arrive late. Keep keyboard focus stable, expose the total row count and each row's position, and overscan enough rows that fast scrolling does not reveal blank space.
Ask AI for it
Replace this oversized React list with '@tanstack/react-virtual'. Use 'useVirtualizer' with the scrolling element, an estimated row size, measurement for dynamic-height rows, and a modest 'overscan' value. Render one positioned row per virtual item inside a spacer with the virtualizer's total size. Preserve stable item keys and focused-row state when rows unmount. For a grid or table, add 'aria-rowcount' to the container and the correct one-based 'aria-rowindex' to each rendered row. Test keyboard navigation, fast scrolling, dynamic height changes, and scrolling directly to the last item.