virtual-lists

React large lists cause scroll jank by mounting thousands of DOM rows at once. Virtualization solves this by rendering only the visible items in a scrollable viewport, updating the window dynamically as the user scrolls to maintain UI performance.

To implement list virtualization, use a windowing library to absolute-position cells within a scrollable viewport. Configure fixed or variable item sizing to mount only visible rows, ensuring performant rendering for thousands of records.

Yes, variable-height virtualization supports rows that differ in size. While fixed-height virtualization handles uniform rows efficiently, variable sizing accommodates dynamic content within large scrolling datasets without sacrificing performance.

Yes, virtual lists support infinite scrolling through optional incremental loading hooks. These hooks fetch additional data dynamically as the viewport approaches unloaded items, combining windowing with progressive data retrieval.

For large grids needing horizontal and vertical virtualization, use a windowing library to absolute-position cells in both directions. This mounts only visible grid sections, maintaining smooth scrolling across extensive multidimensional datasets.

Avoid virtualization for small datasets where mounting all rows causes no performance issues. It requires a scrollable viewport and correct item sizing, adding complexity that provides no benefit for short lists.