react-window is a highly performant and minimalist React component library for efficiently rendering large lists and grid data using windowing (also known as virtualization). It optimizes performance by rendering only the items currently visible within the viewport, significantly reducing the DOM nodes, memory footprint, and rendering time compared to rendering all items in a large dataset. The library provides several specialized components, including `FixedSizeList`, `VariableSizeList`, `FixedSizeGrid`, and `VariableSizeGrid`, to cater to different use cases like lists with fixed item sizes or dynamic item sizes. The current stable version is 2.2.7, and it maintains an active release cadence, frequently publishing patch versions to address bugs and enhance TypeScript compatibility, especially for newer React versions. Its key differentiators include a small bundle size, strong focus on performance, and a straightforward API, making it a popular choice for optimizing UI rendering in applications and development tools like React DevTools.
npm install react-windowVerified import paths — ran on the pinned version, not inferred.
Demonstrates a basic setup of `FixedSizeList` to efficiently render 1000 rows, each with a fixed height, within a scrollable container.
Ensure custom row/cell components return a valid `ReactElement` (i.e., not `null`, `undefined`, `boolean`, or primitives directly) and update any explicit type annotations from `ReactNode` to `ReactElement` as needed.
If your application relies on catching specific error types from these methods, update `try-catch` blocks to handle `RangeError` explicitly, potentially alongside `Error` for backward compatibility with older versions or other errors.
When using `useDynamicRowHeight` or other client-side-only features, ensure they are executed exclusively in a browser environment, typically by conditionally rendering components or hooks using `typeof window !== 'undefined'` checks if performing custom SSR logic.
Define your row or cell renderer as a separate functional React component (e.g., `const MyRow = ({ index, style }) => <div style={style}>...</div>;`) and then pass its reference to the virtualization component: `<FixedSizeList>{MyRow}</FixedSizeList>`.Ensure the ref is correctly initialized using `useRef` and that `ref.current` is accessed only after the component is mounted. Calling imperative methods should ideally be done within a `useEffect` hook, a user event handler, or after checking `ref.current` for nullability.
Double-check that all mandatory props (`height`, `width`, `itemCount`, `itemSize` for fixed lists/grids, or corresponding size-getter functions for variable lists/grids) are provided and are of the correct type (usually numbers for fixed sizes).