Web Fundamentals

List Virtualization: Render Large Lists Efficiently

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
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
PreviousNext

Topic Guide

On this page