react-virtualized — Efficiently Render Large Lists and Tables in React

Introduction

react-virtualized provides a collection of React components for rendering large lists, grids, and tables by only mounting the DOM nodes currently visible in the viewport. This windowing technique keeps memory usage and DOM size constant regardless of dataset size, enabling smooth scrolling through tens of thousands of rows.

What react-virtualized Does

• Renders only visible rows and columns, keeping DOM node count small
• Provides List, Grid, Table, Collection, and Masonry layout components
• Supports variable row heights with CellMeasurer for dynamic content
• Handles infinite scrolling with InfiniteLoader for paginated data sources
• Includes AutoSizer for responsive containers that fill available space

Architecture Overview

Each component maintains a scroll offset and calculates which cells fall within the visible viewport. Only those cells are mounted to the DOM. As the user scrolls, off-screen cells are unmounted and new cells are created. CellMeasurer pre-renders cells in a hidden container to measure dynamic heights before positioning. A cell cache stores measurements to avoid redundant calculations.

Self-Hosting & Configuration

• Install via npm and import specific components to keep bundle size minimal
• Wrap components in AutoSizer to automatically adapt to parent container dimensions
• Use CellMeasurer with CellMeasurerCache for rows with variable heights
• Configure overscanRowCount to render extra rows above and below the viewport for smoother scrolling
• Combine with InfiniteLoader for on-demand data fetching as users scroll

Key Features

• Multiple layout types: List, Grid, Table, Collection, and Masonry in one library
• CellMeasurer for accurate dynamic row height calculations
• InfiniteLoader for seamless pagination and lazy loading
• ArrowKeyStepper for keyboard navigation through virtualized content
• WindowScroller for using the browser window as the scroll container

Comparison with Similar Tools

• react-window — smaller, more modern successor by the same author; fewer features but significantly smaller bundle size
• @tanstack/virtual — framework-agnostic virtualizer with headless architecture; more flexible but requires more setup
• vue-virtual-scroller — Vue equivalent with similar windowing concepts; choose based on framework
• Clusterize.js — vanilla JS approach to virtual scrolling; no React integration or component model

FAQ

Q: Should I use react-virtualized or react-window? A: For new projects, react-window is recommended as it is smaller and simpler. Use react-virtualized if you need CellMeasurer, Collection, or Masonry layouts not available in react-window.

Q: How does it handle variable row heights? A: Use the CellMeasurer component to pre-measure content. It renders each cell off-screen, records its dimensions, and caches them for layout calculations.

Q: Can it render millions of rows? A: Yes. Since only visible rows are mounted, memory and DOM usage remain constant. The practical limit is the precision of scroll position calculations at very large counts.

Q: Does it support horizontal scrolling? A: Yes. The Grid component supports both horizontal and vertical scrolling. List can also be configured for horizontal layout.

Sources

• https://github.com/bvaughn/react-virtualized
• https://bvaughn.github.io/react-virtualized/