Web Fundamentals

List Virtualization: Render Large Lists Efficiently

hardWeb Fundamentals

List Virtualization: Render Large Lists Efficiently

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRRender only visible items + small buffer. Use FixedSizeList for uniform items, VariableSizeList for dynamic heights.
Very High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

List virtualization renders only the items currently visible in the viewport plus a small overscan buffer. This keeps DOM node count low (~10-20) even with 10,000+ items, dramatically improving scroll performance, memory usage, and initial render time.

Instead of building the entire 10,000-item wall (huge DOM, slow scrolling), you only build the small section the user can currently see through a moving window, plus a little extra on each side for smooth movement.

Full Dataset (10,000 items)
Viewport + Overscan (~15 items)
Only these items exist in DOM
Scroll → Recycle & Reuse

1Fixed Size Lists

Use when all items have the same height. Extremely fast and simple.

FixedSizeList.tsxtsx
import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={80}
  width="100%"
  overscanCount={5}
>
  {Row}
</FixedSizeList>

2Variable Size Lists

For items with dynamic heights. Requires height estimation and cache management.

3Grid Virtualization & Infinite Scroll

Use FixedSizeGrid for 2D layouts. Combine with InfiniteLoader for infinite scrolling.

4Advanced Patterns

Scrolling to items, memoized rows, custom scrollbars, and accessibility support.

Key Takeaways
  • ✓Virtualization renders only visible + buffer items
  • ✓FixedSizeList for uniform heights, VariableSizeList for dynamic
  • ✓Use InfiniteLoader for infinite scrolling
  • ✓Memoize rows and use stable keys
  • ✓Add proper ARIA attributes for accessibility
  • ✓Measure with large datasets — don't guess
  • ✓Combine with code splitting for optimal results