Virtualized List Component

Problem Statement

When building dashboards, search grids, or real-time logs feeds, frontend applications often have to render tens of thousands of items. In traditional React development, calling .map() to output 50,000 records results in 50,000 DOM nodes. This creates massive memory overhead, degrades initial load time, and causes scroll stuttering due to continuous layout calculations (reflows).

Your task is to build a reusable, high-performance VirtualList component in React. Rather than rendering all elements, your component must calculate the user's current scroll position and render only the items that are currently visible within the visible container (plus a small buffer). As the user scrolls, the component should recycle elements dynamically, keeping the total DOM footprint tiny and rendering at a smooth 60fps.

Requirements

Functional

• Visible Rendering: Accept a dataset array items of length $N$, a visible viewport height, a fixed itemHeight (in pixels), and a renderItem function component.
• Scroll Tracking: Listen to scroll events on a scroll container and calculate the indices of the first and last visible items.
• Scrollbar Simulation: Maintain a dummy spacer container whose height is equal to the total computed height of all items ($N \times \text$) so the browser's scrollbar matches the true height of the list.
• Positioning: Align items absolutely or translate them using CSS properties (transform: translateY(...) or top) so they appear at their correct vertical positions within the virtual list wrapper.
• Buffer Rendering: Render a configurable number of extra off-screen items (buffer) above and below the viewport to prevent flickering when scrolling rapidly.

Non-Functional

• The component must be built in TypeScript with strict generic support (items: T[], renderItem: (item: T, index: number) => ReactNode).
• Ensure scroll interactions run at 60fps without causing layout thrashing or triggering cascading render cycles.
• Ensure focus outlines work correctly for list items.

Concepts Tested

• Windowing and virtualization logic.
• Viewport scrolling math (calculating scroll offsets, start/end bounds).
• absolute positioning vs GPU-accelerated translation.
• Ref tracking and performance tuning in React hooks (avoiding layout thrashing).
• Web accessibility constraints for dynamically unmounted DOM nodes.