react-window

react-window is a lightweight React component library for efficiently rendering large lists and tabular data. Instead of mounting every row and cell in the DOM, it uses windowing (virtualization) to render only the items currently visible in the viewport, recycling elements as the user scrolls. This keeps memory usage flat and scrolling smooth even for datasets with tens of thousands of rows.

Built around a small set of composable primitives, List and Grid, plus imperative refs and hooks for measuring dynamic sizes, react-window powers demanding UIs including React DevTools and the Replay browser. It ships first-class TypeScript definitions and supports fixed, percentage, and function-based row and column sizing.

What You Get

• A List component for vertically or horizontally windowed lists with fixed or dynamic row heights.
• A Grid component for two-dimensional virtualization of tabular data with independent row and column sizing.
• Imperative APIs (via useListRef/useGridRef) to scroll to a specific index or offset programmatically.
• Hooks such as useDynamicRowHeight for measuring and caching variable-size rows automatically.
• First-class TypeScript types, RTL support, and a getScrollbarSize helper for layout calculations.

Common Use Cases

• Rendering long feeds, logs, or search results with thousands of rows in a React app.
• Building data tables and spreadsheets where both rows and columns must be virtualized.
• Displaying large tree views or chat histories without freezing the UI on scroll.
• Powering developer tools and inspectors that stream large amounts of structured data.

Under The Hood

Architecture - The library is organized around a framework-agnostic core in lib/core/, where useVirtualizer is the central hook that tracks container size via a ResizeObserver, computes visible start/stop indices (getStartStopIndices), and caches item bounds (useCachedBounds, createCachedBounds) to derive per-item offsets. The public List and Grid components in lib/components/ compose this core, translating the resolved window into rendered rows and cells while useItemSize and useDynamicRowHeight handle fixed, percentage, and measured sizing.

Tech Stack - Written almost entirely in TypeScript (~97%), it declares React and react-dom 18 or 19 as peer dependencies and ships as dual ESM/CJS builds with bundled type definitions. The repo uses Vite for building the library and docs, Vitest with Testing Library for unit tests, Playwright for cross-framework integration tests (Next, Vike, Vite), and ESLint plus Prettier for linting and formatting.

Code Quality - The codebase is small, focused, and thoroughly tested: nearly every core module, hook, and utility has a co-located *.test.ts(x) file, and integration tests exercise real framework setups. Code is strictly typed, uses small single-purpose modules, and includes assertion helpers and shared test mocks (mockResizeObserver, mockScrollTo).

API Design - The public surface is deliberately minimal and ergonomic: two components (List, Grid) plus a handful of ref and sizing hooks, with row and cell renderers receiving typed RowComponentProps/CellComponentProps. Sizing accepts numbers, percentage strings, or functions, and imperative scrolling is exposed through refs, letting developers get started with little boilerplate while keeping advanced control available.