tanstack-virtual

Viewport-based virtualization solves slow UI rendering by computing which items fall within the scroll viewport and mounting only those DOM nodes, keeping huge lists smooth at 60FPS. It positions visible items using absolute layout to maintain scroll accuracy.

Dynamic measurement handles variable-height rows in virtualized lists by using measurement hooks to calculate actual item dimensions. This prevents scroll jumps and ensures accurate positioning without requiring you to know exact heights upfront.

Yes, virtualization supports grid-style layouts, horizontal scrolling, infinite loading, and sticky rows. It computes visible ranges for both vertical and horizontal axes, enabling smooth scrolling behaviors across complex UI collection patterns.

You provide an estimateSize function to give the virtualizer initial dimensions before measurement, but exact sizes are not required for every item. Dynamic measurement hooks refine the actual sizes as items render, preventing scroll jumps and maintaining accuracy.

Scroll position jumps or lag often occurs when estimateSize is misconfigured or dynamic measurement is not enabled for variable-height content. Correctly configuring count, getScrollElement, and estimateSize with appropriate overscan ensures accurate positioning and smooth scrolling.

Yes, viewport virtualization applies to React and other supported TS/JS frameworks. The virtualization logic is framework-agnostic, allowing you to render large UI collections smoothly across different JavaScript environments.