List Virtualization & View-Holder Recycling

Scroll the feed

Scroll position row 0 / 9999

Recycler configuration

Buffer rows (above+below viewport) 4

Row height (px) 56

Live readouts

View-holders alive

Recycle events

DOM/GPU nodes used

Memory vs naive list

How it works

A mobile list with 10,000 rows (a RecyclerView / UITableView / virtualized <List>) never keeps 10,000 live views. It keeps a small view-holder pool sized to just cover the visible viewport plus a buffer, and reuses (recycles) a holder the instant it scrolls fully off-screen:

visibleCount = ceil(viewportH / rowH) + 1
poolSize     = visibleCount + 2 × bufferRows
holder.y     = (index − firstVisibleIndex) × rowH   // reposition, don't recreate

As you drag the scroll slider, the sim computes the first visible row index from the scroll offset, then walks a window of poolSize rows. A holder already bound to a row that scrolled out is rebound to the new row entering — its mesh, position and label are reused in place rather than destroyed and reallocated, exactly like Android's RecyclerView.Recycler or React's windowing libraries. Toggle "Virtualized" off to render one solid block for all 10,000 rows instead, and watch node count and relative memory jump.

Scroll position — sets which row index sits at the top of the viewport.
Buffer rows — extra off-screen holders kept ready above/below, trading memory for scroll smoothness (less "flash of empty row" during fast flings).
Row height — changes how many rows fit the fixed viewport, so pool size recomputes live.
Recycle events — increments every time a holder's bound row index changes instead of a new holder being allocated.

Real-world relevance: this windowing/recycling scheme is why a social feed with millions of posts scrolls at 60fps on a phone with a few hundred MB of RAM — memory cost stays O(viewport), not O(list length).

Bound view-holder (visible) Buffered holder (off-screen) Naive mode: unrecycled row

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.