{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-window"],"cli":null},"imports":["import { FixedSizeList } from 'react-window'","import { VariableSizeList } from 'react-window'","import { FixedSizeGrid } from 'react-window'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}