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

> React Virtualized renders only the visible portion of large data sets, enabling smooth scrolling through thousands of rows without DOM performance degradation.

## Install

Save as a script file and run:

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

## Quick Use
```bash
npm install react-virtualized
```
```jsx
import { List } from 'react-virtualized';
import 'react-virtualized/styles.css';

function MyList({ items }) {
  return (
    <List
      width={400}
      height={600}
      rowCount={items.length}
      rowHeight={50}
      rowRenderer={({ index, key, style }) => (
        <div key={key} style={style}>{items[index]}</div>
      )}
    />
  );
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/dcfda7ba-44b2-11f1-9bc6-00163e2b0d79
Author: Script Depot