Building a Virtual Scroll List: 10,000 Rows, One Screenful of DOM
Build a virtual scroll list from scratch: index math, a recycled row pool, spacer sizing, rAF-throttled scroll, instant search & sort on 10,000 rows.
Building a Virtual Scroll List: 10,000 Rows, One Screenful of DOM
Render a list of ten thousand rows the obvious way and the browser will do exactly what you asked: create ten thousand elements, lay out ten thousand elements, paint ten thousand elements, and hold all of them in memory for as long as the page is open. The first paint takes a visible beat. Scrolling stutters. Adding a search box makes it worse, because now every keystroke rebuilds all ten thousand. And the whole time, the user is looking at about nine of them. Virtual scrolling fixes this by rendering only what fits on screen while making the scrollbar behave as though the entire list were there. It's the technique behind every fast data grid, log viewer, chat history and file browser you've used, and it's the reason react-window , TanStack Virtual and their equivalents exist in every framework ecosystem. It's also — and this is the part worth internalizing — about forty lines of arithmetic. There's no clever data structure and no framework magic. There's a fixed…
