# React Window — Efficiently Render Large Lists and Grids in React

> A lightweight React library for virtualizing long lists and tabular data by only rendering visible items in the viewport.

## Install

Save as a script file and run:

# React Window — Efficiently Render Large Lists and Grids in React

## Quick Use
```bash
npm install react-window
```
```jsx
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

function App() {
  return (
    <FixedSizeList height={400} width={300} itemCount={10000} itemSize={35}>
      {Row}
    </FixedSizeList>
  );
}
```

## Introduction
React Window is a rewrite of react-virtualized by the same author, focused on being smaller and faster. It solves the problem of rendering thousands of rows or grid cells without degrading scroll performance, by only mounting the DOM nodes currently visible in the viewport plus a small overscan buffer.

## What React Window Does
- Virtualizes fixed-size and variable-size vertical lists
- Virtualizes fixed-size and variable-size grids (rows and columns)
- Renders only visible items plus a configurable overscan count
- Passes precise positioning styles to each row or cell component
- Supports scrolling to a specific item index programmatically

## Architecture Overview
React Window maintains an internal offset state that tracks the scroll position. On each scroll event it recalculates which item indices fall within the visible range, adds an overscan buffer, and renders only those items as absolutely positioned children inside a scrollable container. For variable-size lists, an item-size function is called per index. The outer container handles native scroll; the inner container is sized to the total content height to preserve scrollbar fidelity.

## Installation & Configuration
- Install via npm: `npm install react-window`
- Choose the right component: FixedSizeList, VariableSizeList, FixedSizeGrid, or VariableSizeGrid
- Set height, width, itemCount, and itemSize (number or function) as props
- Use the overscanCount prop to control how many off-screen items to pre-render
- Pair with react-window-infinite-loader for paginated or lazy-loaded data

## Key Features
- Extremely small bundle size (under 6 KB gzipped)
- Fixed and variable item size support for both lists and grids
- RTL (right-to-left) layout support
- Compatible with react-window-infinite-loader for infinite scrolling
- Render prop pattern gives full control over item markup and styling

## Comparison with Similar Tools
- **react-virtualized** — predecessor by the same author; more features but significantly larger bundle
- **TanStack Virtual** — framework-agnostic headless virtualizer; supports React, Vue, Solid, and Svelte
- **react-virtuoso** — higher-level API with grouped items and auto-sizing; larger bundle
- **@tanstack/react-virtual** — hooks-based API; newer approach with measured item sizes
- **react-infinite-scroll-component** — simpler infinite scroll but no true virtualization

## FAQ
**Q: When should I use VariableSizeList instead of FixedSizeList?**
A: Use VariableSizeList when rows have different heights. You must provide an itemSize function that returns the pixel height for each index.

**Q: Can I use React Window with dynamic content that changes height?**
A: VariableSizeList supports it, but you need to call resetAfterIndex when item sizes change so the cache is invalidated.

**Q: Does it work with SSR frameworks like Next.js?**
A: Yes. The component renders an empty shell on the server and hydrates on the client since virtualization depends on scroll position.

**Q: How does it compare to react-virtualized in performance?**
A: React Window is faster to load due to its smaller size and is slightly more efficient at runtime because it removed features rarely used in practice.

## Sources
- https://github.com/bvaughn/react-window
- https://react-window.vercel.app

---
Source: https://tokrepo.com/en/workflows/asset-3ddf5178
Author: Script Depot