React Virtualized — Efficient Rendering of Large Lists and Tables in React

Introduction

Rendering thousands of DOM nodes in a scrollable list or table causes browsers to slow down and memory usage to spike. React Virtualized solves this by only mounting the elements currently visible in the viewport, plus a small overscan buffer. As the user scrolls, off-screen elements are unmounted and new ones are created, keeping DOM node count constant regardless of data size.

What React Virtualized Does

• Virtualizes rendering of lists, tables, grids, and masonry layouts
• Keeps DOM node count constant by recycling elements on scroll
• Provides components for List, Table, Grid, Collection, and Masonry
• Supports dynamic row heights with CellMeasurer for variable-size content
• Includes AutoSizer to automatically fill available container dimensions

Architecture Overview

React Virtualized calculates which rows or cells are visible based on scroll position, container size, and row/cell dimensions. On each scroll event, it determines the visible range, renders only those items, and positions them absolutely within a scrollable container. A cache stores measured dimensions for variable-height rows. The Grid component is the foundation; List and Table are higher-level abstractions built on top of it.

Self-Hosting & Configuration

• Install from npm and import the CSS stylesheet for default styles
• Use AutoSizer to make the virtualized component fill its parent container
• For fixed row heights, pass rowHeight as a number; for variable heights, use CellMeasurer
• Set overscanRowCount to render extra rows above and below the viewport for smoother scrolling
• Use scrollToIndex prop for programmatic scrolling to specific rows

Key Features

• Handles lists with hundreds of thousands of rows at 60fps
• Built-in Table component with sortable columns and header rows
• WindowScroller integrates with the page scroll instead of a fixed container
• InfiniteLoader enables on-demand data fetching as the user scrolls
• MultiGrid locks columns or rows for spreadsheet-like fixed headers

Comparison with Similar Tools

• react-window — smaller rewrite by the same author; React Virtualized has more built-in components
• TanStack Virtual — headless virtualizer for any framework; React Virtualized is React-specific with styled components
• AG Grid — full data grid with sorting, filtering, and editing; React Virtualized focuses on rendering performance
• Native CSS content-visibility — browser-native lazy rendering; React Virtualized offers more control and wider browser support
• react-infinite-scroll — appends items on scroll; React Virtualized recycles DOM nodes for constant memory

FAQ

Q: Should I use react-virtualized or react-window? A: Use react-window for simpler use cases where you only need List or Grid. Use react-virtualized when you need Table, Masonry, CellMeasurer, or MultiGrid features.

Q: How do I handle rows with variable heights? A: Wrap your row renderer in CellMeasurer and provide a CellMeasurerCache to measure and cache heights dynamically.

Q: Can I use react-virtualized with a CSS grid layout? A: The library uses absolute positioning internally. For CSS grid or flexbox layouts, consider react-window or TanStack Virtual which support different layout modes.

Q: Does it support horizontal scrolling? A: Yes. The Grid and MultiGrid components support both vertical and horizontal virtualization simultaneously.

Sources

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