March 15, 2026 · 247 views
Scrolling forever without melting the browser
A feed that never ends shouldn't mean a DOM that never stops growing.
Our community platform has an infinite feed. Scroll, more loads, scroll, more loads. Feels great — until you realize the browser is keeping every post you've ever scrolled past alive in the DOM. Scroll long enough and the whole tab starts to chug.
The issue is simple: a feed that never ends shouldn't mean a page that grows forever. You only actually see a handful of posts at a time, but we were rendering all of them.
The fix is virtualization. I used TanStack Virtual to only render the rows currently in view, plus a small buffer above and below. As you scroll, rows recycle — the DOM stays flat and constant-size no matter how far down you go. A thousand posts in, the browser is doing the same amount of work as at the top.
I paired that with per-row memoization so a row only re-renders when its own data changes, not because something unrelated updated the list.
Result: buttery scrolling that doesn't get worse over time. The trick with "infinite" anything is remembering the user's screen is very much finite. Render what they can see, recycle the rest, and let the illusion do the work.