AI-Generated Virtual Lists White-Screen Under Fast Scroll — Here's the Fix
A virtual list that blanks under fast scroll is a production outage disguised as a minor UI glitch. Knowing that overscan, transform-based positioning, and rAF-throttled scroll handlers are what prevent it separates a candidate who can debug a real user-facing bug from one who can only prompt an LLM.
An AI-written virtual list renders correctly at slow speeds but produces a white screen when the scrollbar is dragged quickly. The root cause is the gap between synchronous browser scrolling and React's asynchronous re-render: old DOM nodes scroll out of view before new ones mount. The fix is overscan — rendering a handful of extra rows above and below the visible window so the browser always has content to paint during rapid scrolls. The change requires only three lines of code to expand the start and end index calculations by a buffer count.
Beyond the white-screen fix, six follow-up questions unpack deeper virtual-list mechanics: why transform beats padding-top for positioning (compositing vs. layout reflow), how to handle variable row heights with estimated measurements and post-render correction, why requestAnimationFrame throttles scroll events better than setTimeout, the danger of using loop indices as React keys in a shifting window, and the performance crossover point where virtual lists beat time-slicing at roughly 5,000 rows. Each answer ties directly to a production failure mode that a library like TanStack Virtual papers over — until it doesn't.
The white-screen failure is a direct consequence of treating onScroll as synchronous when React's setState batching introduces a render delay — a timing bug that AI code generators routinely miss because they optimize for logical correctness, not frame-level behavior.
Overscan is a one-line fix that transforms a virtual list from a demo into something production-usable, yet it's absent from most tutorial implementations and AI-generated snippets.
The transform-vs-paddingTop distinction is a litmus test for whether a frontend engineer understands the browser rendering pipeline beyond the React abstraction layer.
Interviewers are increasingly using AI-generated code as a baseline and probing whether the candidate can diagnose its failure modes — the skill being tested is debugging reasoning, not syntax recall.