react-window — Efficiently Render Large Lists and Tabular Data

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