{"id":11906,"library":"react-virtualized","title":"React Virtualized Components","description":"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.","status":"maintenance","version":"9.22.6","language":"javascript","source_language":"en","source_url":"https://github.com/bvaughn/react-virtualized","tags":["javascript","react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized"],"install":[{"cmd":"npm install react-virtualized","lang":"bash","label":"npm"},{"cmd":"yarn add react-virtualized","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-virtualized","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI component rendering.","package":"react","optional":false},{"reason":"React DOM for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"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.","wrong":"const List = require('react-virtualized')","symbol":"List","correct":"import { List } from 'react-virtualized'"},{"note":"Most components are exported as named exports directly from the main package. Avoid deep imports unless explicitly necessary or for older CommonJS setups.","wrong":"import Table from 'react-virtualized/dist/commonjs/Table'","symbol":"Table","correct":"import { Table, Column } from 'react-virtualized'"},{"note":"AutoSizer is crucial for dynamically sizing virtualized components to fill available space without manual width/height calculations. Prefer top-level named imports.","wrong":"import { AutoSizer } from 'react-virtualized/lib/AutoSizer'","symbol":"AutoSizer","correct":"import { AutoSizer } from 'react-virtualized'"},{"note":"Import the type directly for type safety in TypeScript projects. Do not manually define the interface or type.","wrong":"type ListRowRenderer = ({ index, key, style, parent }: ListRowProps) => React.ReactNode","symbol":"ListRowRenderer","correct":"import { ListRowRenderer } from 'react-virtualized'"}],"quickstart":{"code":"import React, { useRef, useCallback } from 'react';\nimport { List, AutoSizer, ListRowRenderer } from 'react-virtualized';\nimport 'react-virtualized/styles.css'; // Essential for basic styling\n\ninterface Item {\n id: number;\n name: string;\n description: string;\n}\n\nconst generateData = (count: number): Item[] => {\n const data: Item[] = [];\n for (let i = 0; i < count; i++) {\n data.push({\n id: i,\n name: `Item ${i}`,\n description: `This is the description for item number ${i}. It can be quite long, demonstrating content within a virtualized row.`\n });\n }\n return data;\n};\n\nconst items = generateData(10000); // Generate 10,000 dummy items\n\nfunction MyVirtualizedList() {\n const listRef = useRef(null);\n\n const rowRenderer: ListRowRenderer = useCallback(({ index, key, style }) => {\n const item = items[index];\n return (\n
\n

{item.name}

\n

{item.description}

\n
\n );\n }, [items]); // Dependencies for useCallback to prevent unnecessary re-renders\n\n return (\n
\n \n {({ width, height }) => (\n \n )}\n \n
\n );\n}\n\nexport default MyVirtualizedList;","lang":"typescript","description":"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."},"warnings":[{"fix":"Update your `react` and `react-dom` packages to versions compatible with `^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0`. Check `npm list react` and `npm list react-dom` to identify multiple or incompatible React instances.","message":"Recent minor versions (9.22.4, 9.22.6) updated peer dependencies to include React 17, 18, and 19. While this aims for compatibility, ensure your project's React version aligns with these requirements to avoid potential build or runtime issues due to mismatched React contexts.","severity":"breaking","affected_versions":">=9.22.4"},{"fix":"Memoize `rowRenderer` using `useCallback`, ensure `rowHeight` and `rowCount` are stable values or derived from stable state/props. For dynamic row heights, use `CellMeasurer` or ensure a well-defined `getRowHeight` function.","message":"Achieving optimal performance with virtualized lists often requires stable props. Frequent changes to `rowHeight`, `rowCount`, or `rowRenderer` (if not memoized) can negate the performance benefits of virtualization, leading to unnecessary re-renders.","severity":"gotcha","affected_versions":">=9.0.0"},{"fix":"Always provide explicit `width` and `height` props to virtualized components, or wrap them in an `` component to dynamically fill their parent's dimensions. Ensure the parent container of `AutoSizer` also has defined dimensions.","message":"Incorrectly configuring `width` and `height` props for `List`, `Table`, or `Grid` components can result in blank content or unexpected scroll behavior. These components require explicit dimensions or need to be wrapped in a container that provides them (e.g., `AutoSizer`).","severity":"gotcha","affected_versions":">=9.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that `react` and `react-dom` peer dependencies are met. Ensure you are using named imports correctly (e.g., `import { List } from 'react-virtualized'`). Check your bundler configuration for potential duplicate React instances.","cause":"This error typically occurs when React cannot resolve the component imported from `react-virtualized`. This can be due to incorrect import paths, a mismatched React version, or multiple instances of React loaded in the application.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)"},{"fix":"Ensure that the data array or `rowCount` is always initialized, even if empty, before rendering the virtualized component. For asynchronous data, conditionally render the component after data is loaded or provide a default empty array/zero count.","cause":"Occurs when the data source (e.g., `list` prop for `List` or `rowCount`) passed to a virtualized component is `undefined` or `null` instead of an array or a number, especially during initial render or asynchronous data loading.","error":"TypeError: Cannot read properties of undefined (reading 'length')"},{"fix":"Ensure that any imperative calls on component refs are made only after the component has mounted (e.g., within `useEffect` with an empty dependency array or after a render). Double-check ref assignment and `null` checks before accessing ref properties.","cause":"This error often indicates that you're attempting to access a method or property on a `react-virtualized` component instance (e.g., via a ref) before the component has been mounted to the DOM or if the ref is not properly assigned.","error":"Uncaught TypeError: Cannot read properties of null (reading 'scrollTop')"}],"ecosystem":"npm"}