{"id":11910,"library":"react-window","title":"React Window","description":"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.","status":"active","version":"2.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/bvaughn/react-window","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-window","lang":"bash","label":"npm"},{"cmd":"yarn add react-window","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-window","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for React applications.","package":"react","optional":false},{"reason":"Required as a peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component for rendering lists where all items have the same, fixed height.","wrong":"const FixedSizeList = require('react-window').FixedSizeList; // Incorrect CommonJS pattern for modern React/TypeScript projects","symbol":"FixedSizeList","correct":"import { FixedSizeList } from 'react-window'"},{"note":"Use this component for lists where items can have varying, dynamically calculated heights.","wrong":"import VariableSizeList from 'react-window'; // 'react-window' does not provide a default export for components","symbol":"VariableSizeList","correct":"import { VariableSizeList } from 'react-window'"},{"note":"Component for rendering 2D grids where all rows and columns have fixed sizes.","wrong":"import { Grid } from 'react-window'; // The fixed-size grid is specifically 'FixedSizeGrid'","symbol":"FixedSizeGrid","correct":"import { FixedSizeGrid } from 'react-window'"}],"quickstart":{"code":"import React from 'react';\nimport { FixedSizeList } from 'react-window';\nimport { createRoot } from 'react-dom/client';\n\nconst Row = ({ index, style }) => {\n  // `style` prop is crucial for positioning items correctly\n  return (\n    <div style={{ ...style, background: index % 2 ? '#eee' : 'white', padding: '10px' }}>\n      Item {index + 1}\n    </div>\n  );\n};\n\nconst MyVirtualList = () => (\n  <FixedSizeList\n    height={300} // Total height of the scrollable container\n    width={400}  // Total width of the scrollable container\n    itemCount={1000} // Total number of items in the list\n    itemSize={50}  // Height of each item\n  >\n    {Row}\n  </FixedSizeList>\n);\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<MyVirtualList />);\n}\n","lang":"typescript","description":"Demonstrates a basic setup of `FixedSizeList` to efficiently render 1000 rows, each with a fixed height, within a scrollable container."},"warnings":[{"fix":"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.","message":"The TypeScript return type for `List` and `Grid` components, as well as the `rowComponent` and `cellComponent` props, was changed from `ReactNode` to `ReactElement`. This adjustment, primarily for React 18 compatibility, ensures stricter type checking and may require minor updates to explicit type annotations in consuming applications if they relied on the broader `ReactNode` type.","severity":"breaking","affected_versions":">=2.2.2"},{"fix":"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.","message":"When an invalid index is passed to imperative scroll-to methods (e.g., `scrollToItem`), the library now throws a `RangeError` instead of a generic `Error`. While the error's behavior is similar, the specific error class has changed.","severity":"breaking","affected_versions":">=2.2.3"},{"fix":"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.","message":"The `useDynamicRowHeight` hook now explicitly avoids instantiating `ResizeObserver` during server-side rendering (SSR) to prevent potential issues like client-side hydration mismatches and unnecessary resource allocation on the server. Dynamic row heights are inherently a client-side concern.","severity":"gotcha","affected_versions":">=2.2.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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>`.","cause":"This error occurs when you pass an already rendered JSX element or an inline function that returns JSX directly, instead of passing a reference to a functional React component.","error":"Error: FixedSizeList: Each child passed to FixedSizeList or FixedSizeGrid must be a React component. e.g. <FixedSizeList>{MyRow}</FixedSizeList>"},{"fix":"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.","cause":"This usually indicates that the `ref.current` value for `FixedSizeList` or `FixedSizeGrid` is `null` or `undefined` at the time the imperative method (like `scrollToItem`, `scrollTo`) is invoked. This often happens if the ref is not properly attached or accessed before the component has mounted.","error":"TypeError: Cannot read properties of undefined (reading 'scrollToItem') when calling ref methods."},{"fix":"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).","cause":"While a generic React error, when seen with `react-window`, it frequently points to missing or invalid required props for the virtualization component. Specifically, `height`, `width`, `itemCount`, and `itemSize` (for fixed-size components) are critical and must be valid numbers.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."}],"ecosystem":"npm"}