React Virtualized

React Virtualized is a collection of React components for windowed rendering of large lists, grids, tables, and masonry layouts. Instead of mounting a DOM node for every row or cell in a dataset, it measures the viewport and renders only the items currently visible (plus a configurable overscan buffer), keeping scroll performance smooth even with tens of thousands of rows.

The library ships a low-level Grid primitive that handles size/position calculation and cell recycling, and builds List, Table, Masonry, Collection, and MultiGrid on top of it as purpose-built wrappers, alongside helpers like AutoSizer, CellMeasurer, InfiniteLoader, and ScrollSync for common layout and data-loading needs.

What You Get

• A Grid primitive that computes visible cell ranges from scroll offset and container size, rendering only those cells
• Higher-level List, Table, Masonry, Collection, and MultiGrid components built on top of Grid for common layout shapes
• AutoSizer to measure a parent container and feed width/height into a virtualized component
• CellMeasurer and CellMeasurerCache for dynamic, cached measurement of variable-sized rows/cells
• InfiniteLoader for triggering incremental data loads as the user scrolls near the end of a list
• ScrollSync for coordinating scroll position across multiple Grid instances (e.g. frozen headers/columns)

Common Use Cases

• Rendering large tabular datasets (spreadsheets, admin tables, log viewers) without paginating
• Infinite-scrolling feeds or lists backed by paginated APIs
• Virtualized file/folder trees or chat message lists with thousands of entries
• Masonry-style image or card grids with variable item heights

Under The Hood

Architecture: The core primitive is Grid (source/Grid/Grid.js, ~1,700 lines), which manages a ScalingCellSizeAndPositionManager to compute which cells fall within the current scroll viewport and delegates actual DOM output to defaultCellRangeRenderer, rendering only that visible range plus a configurable overscan buffer (defaultOverscanIndicesGetter). List, Table, Masonry, Collection, and MultiGrid are all thin adapters over Grid that translate list/table/masonry semantics into Grid’s row/column cell-rendering API, so the virtualization logic is written once and shared. AutoSizer measures its parent container to feed Grid its width/height, CellMeasurerCache provides dynamic per-cell size measurement and caching for variable-height rows via Grid’s CellSizeGetter callback, and ScrollSync coordinates scroll offsets across multiple Grid instances (used internally by MultiGrid for frozen headers/columns).

Tech Stack: Source is Flow-typed (/** @flow */ headers) rather than TypeScript, built with Babel to CommonJS and ES module output plus a Rollup UMD bundle, and styled via a single styles.css processed with PostCSS/autoprefixer. Runtime dependencies are minimal: clsx for class composition, dom-helpers for scrollbar-size detection, prop-types for runtime validation, and react-lifecycles-compat to polyfill getDerivedStateFromProps for older React versions. peerDependencies span React/React DOM ^16.3.0 through ^19.0.0, so a legacy, class-component-based library has been kept compatible with the newest React majors.

Code Quality: 27 colocated *.jest.js test files cover the core Grid logic and utility functions (overscan index calculation, multi-column sort, Column prop handling, etc.). Components use a dual validation layer of Flow types plus runtime PropTypes, and a handful of modules (CellMeasurerCache, CellMeasurer, WindowScroller, defaultCellRangeRenderer) emit console.error/invariant-style warnings for common misuse. The project is organized one directory per component with colocated docs, examples, and tests, a consistent pattern across all ~14 top-level components — but GitHub activity signals mark it inactive (0 commits/month recently, last commit January 2025), so it is effectively feature-frozen rather than under active development.

API Design: Components are available as named exports (import {List, Table} from 'react-virtualized') or as deep imports (react-virtualized/dist/commonjs/List) for bundle-size-conscious consumers, with a documented webpack-alias trick for shorter deep-import paths. Table’s presentational styles require a separate import 'react-virtualized/styles.css', a rough edge relative to fully self-contained components. Grid’s own prop surface is dense (40+ props) and benefits from reading docs/Grid.md rather than being self-evident from prop names alone, though that mental model transfers cleanly to List/Table/Masonry once learned. Notably, the README candidly points newcomers toward the maintainer’s own lighter-weight successor, react-window, as an alternative for new projects.