react-virtualized is a React library providing a collection of high-performance components designed for efficiently rendering large datasets, such as extensive lists and complex tables. It employs a "windowing" or "virtualization" technique, rendering only the rows or cells currently visible in the viewport, which drastically improves performance and reduces memory consumption in data-heavy applications. The current stable version is 9.22.6. Recent releases primarily focus on updating peer dependencies to maintain compatibility with newer React versions (up to React 19) and addressing minor bug fixes or security enhancements like Trusted Types support, indicating a maintenance phase rather than active feature development. Key differentiators include its comprehensive suite of components (List, Table, Grid, Collection), flexible sizing options, and a robust architecture optimized for minimizing DOM nodes and reflows.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Use named import for modern ESM environments. CommonJS `require` might work in some setups but is not the recommended approach for this library with contemporary React.
import { List } from 'react-virtualized'
Most components are exported as named exports directly from the main package. Avoid deep imports unless explicitly necessary or for older CommonJS setups.
import { Table, Column } from 'react-virtualized'
AutoSizer is crucial for dynamically sizing virtualized components to fill available space without manual width/height calculations. Prefer top-level named imports.
import { AutoSizer } from 'react-virtualized'
Import the type directly for type safety in TypeScript projects. Do not manually define the interface or type.
import { ListRowRenderer } from 'react-virtualized'
This example demonstrates how to create a basic virtualized list using `List` and `AutoSizer` components, efficiently rendering 10,000 items with a fixed row height.
import React, { useRef, useCallback } from 'react';
import { List, AutoSizer, ListRowRenderer } from 'react-virtualized';
import 'react-virtualized/styles.css'; // Essential for basic styling
interface Item {
id: number;
name: string;
description: string;
}
const generateData = (count: number): Item[] => {
const data: Item[] = [];
for (let i = 0; i < count; i++) {
data.push({
id: i,
name: `Item ${i}`,
description: `This is the description for item number ${i}. It can be quite long, demonstrating content within a virtualized row.`
});
}
return data;
};
const items = generateData(10000); // Generate 10,000 dummy items
function MyVirtualizedList() {
const listRef = useRef<List>(null);
const rowRenderer: ListRowRenderer = useCallback(({ index, key, style }) => {
const item = items[index];
return (
<div key={key} style={{ ...style, borderBottom: '1px solid #eee', padding: '10px' }}>
<h3 style={{ margin: 0 }}>{item.name}</h3>
<p style={{ margin: '5px 0 0' }}>{item.description}</p>
</div>
);
}, [items]); // Dependencies for useCallback to prevent unnecessary re-renders
return (
<div style={{ width: '100%', height: '500px' }}>
<AutoSizer>
{({ width, height }) => (
<List
ref={listRef}
width={width}
height={height}
rowCount={items.length}
rowHeight={80} // Fixed height for simplicity; dynamic heights require more complex setup
rowRenderer={rowRenderer}
overscanRowCount={3} // Render a few extra rows for smoother scrolling
/>
)}
</AutoSizer>
</div>
);
}
export default MyVirtualizedList;
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.