# react-window — Efficiently Render Large Lists and Tabular Data

> A lightweight React library for virtualizing long lists and grids, rendering only visible items to keep scroll performance smooth even with tens of thousands of rows.

## Install

Save as a script file and run:

# react-window — Efficiently Render Large Lists and Tabular Data

## 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 lightweight library for rendering only the visible portion of large datasets in React. Instead of mounting thousands of DOM nodes, it creates a scrollable viewport and renders just the items currently on screen. This approach keeps memory usage low and scrolling smooth regardless of list size.

## What react-window Does
- Virtualizes lists so only visible rows are rendered in the DOM
- Supports fixed-size and variable-size lists and grids
- Reduces memory consumption for datasets with thousands of items
- Provides a simple render-prop API for maximum flexibility
- Works with both vertical and horizontal scrolling

## Architecture Overview
react-window calculates which items are visible based on the scroll offset and container dimensions. It positions each visible item absolutely within a container sized to the total content height. On scroll, it recalculates the visible range and mounts or unmounts item components accordingly. The library uses `requestAnimationFrame`-throttled scroll handlers to maintain 60fps performance.

## Self-Hosting & Configuration
- Install via npm: `npm install react-window`
- Choose the right component: `FixedSizeList`, `VariableSizeList`, `FixedSizeGrid`, or `VariableSizeGrid`
- Pass `itemCount`, `itemSize`, `height`, and `width` as required props
- Use `react-window-infinite-loader` for paginated data loading
- Add `react-virtualized-auto-sizer` if the container size is dynamic

## Key Features
- Tiny bundle size (~6KB gzipped) compared to react-virtualized
- Fixed and variable item size support for lists and grids
- Scroll-to-item API for programmatic navigation
- Compatible with `react-window-infinite-loader` for lazy loading
- Simple render-prop pattern for custom item rendering

## Comparison with Similar Tools
- **react-virtualized** — predecessor with more features but much larger bundle
- **TanStack Virtual** — headless, framework-agnostic, newer API with hooks
- **react-virtuoso** — auto-sizing, grouped lists, simpler API for complex cases
- **@tanstack/react-virtual** — hook-based, more flexible but requires more setup
- **vue-virtual-scroller** — similar concept for Vue applications

## FAQ
**Q: When should I use VariableSizeList?**
A: Use it when rows have different heights. Pass an `itemSize` function that returns the height for each index.

**Q: How do I handle dynamic container sizes?**
A: Wrap the list in `<AutoSizer>` from `react-virtualized-auto-sizer` to pass current width and height.

**Q: Can I use react-window with infinite scrolling?**
A: Yes, pair it with `react-window-infinite-loader` to load more items as the user scrolls near the bottom.

**Q: How does it differ from react-virtualized?**
A: react-window is a complete rewrite focused on smaller size and simpler API. It covers the core use cases with fewer components.

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

---
Source: https://tokrepo.com/en/workflows/asset-502241aa
Author: Script Depot