- All Courses
- React Performance Engineering
- Rendering Large Data Sets
- List virtualization
List virtualization
Virtualisation renders only the visible window of a list plus a small overscan buffer, and translates the container so the scrollbar still behaves.
Overview
Ten thousand rows, twenty DOM nodes
Virtualisation renders only the visible window of a list plus a small overscan buffer, and translates the container so the scrollbar still behaves. The cost of the list stops scaling with its length.
Fixed row heights make this easy because every offset is arithmetic. Variable heights need measurement and caching, which is where most naive implementations start jittering during fast scrolls.
Accessibility is the part that gets dropped. Rows that do not exist cannot be found by in-page search or reached by a screen reader, so pair virtualisation with real search and skip links.
In this lesson you will:
- Render only the rows currently on screen
- Handle variable row heights
- Keep scroll position and keyboard access intact
Resources
Notes are not saved yet — they clear when you leave this page.
State colocation and lifting
10m
Pagination versus infinite scroll
4m