{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-virtualized"],"cli":null},"imports":["import { List } from 'react-virtualized'","import { Table, Column } from 'react-virtualized'","import { AutoSizer } from 'react-virtualized'","import { ListRowRenderer } from 'react-virtualized'"],"auth":{"required":false,"env_vars":[]},"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<List>(null);\n\n  const rowRenderer: ListRowRenderer = useCallback(({ index, key, style }) => {\n    const item = items[index];\n    return (\n      <div key={key} style={{ ...style, borderBottom: '1px solid #eee', padding: '10px' }}>\n        <h3 style={{ margin: 0 }}>{item.name}</h3>\n        <p style={{ margin: '5px 0 0' }}>{item.description}</p>\n      </div>\n    );\n  }, [items]); // Dependencies for useCallback to prevent unnecessary re-renders\n\n  return (\n    <div style={{ width: '100%', height: '500px' }}>\n      <AutoSizer>\n        {({ width, height }) => (\n          <List\n            ref={listRef}\n            width={width}\n            height={height}\n            rowCount={items.length}\n            rowHeight={80} // Fixed height for simplicity; dynamic heights require more complex setup\n            rowRenderer={rowRenderer}\n            overscanRowCount={3} // Render a few extra rows for smoother scrolling\n          />\n        )}\n      </AutoSizer>\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}