Digging into Virtual Scrolling
summary
Builds a virtualized table in Next.js/React that keeps only ~20 DOM rows and swaps them on scroll by computing how many rows passed via row height math (uses fixed 48px rows in the demo). Keeps the scrollbar honest with the sandwich technique: a top ghost row and a bottom ghost row absorb removed heights so total table height stays correct. Feeds data from Xata, proves the approach handles tens or hundreds of thousands of items but hits varying browser max height limits around millions.
AI-written summary · about
chapters (4)
related talks
30mvirtual-scroller: Let there be less (DOM)
23mBeyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
33mExploiting Unidirectional Data Flow to the Fullest
24mBenefits of Virtual DOM
27mDemystify the V DOM
07mResponsive Rendering with Next.js
30m150 000 nodes in a Virtual DOM? No problem!
25mLet's Build A Virtual DOM