react-window

weekly downloads4.2M

versionv2.2.7

licenseMIT

categoryfrontend

Overview

react-window is a React library that implements windowing (virtualization) to render only the visible portion of large datasets. Instead of mounting thousands of DOM nodes for a long list, it renders a small subset that fits in the viewport and recycles components as you scroll. This keeps memory usage low and frame rates high, even with tens of thousands of items.

Created by Brian Vaughn (the original author of react-virtualized), react-window is a rewrite focused on minimal API surface and smaller bundle size. It strips away the extra features of react-virtualized to provide just the core windowing primitives: fixed and variable size lists, plus grid layouts. The library is production-ready and widely adopted, with over 4 million weekly downloads as of 2025.

Developers choose react-window when rendering performance matters and the dataset is too large for naive rendering. Common scenarios include chat message histories, data tables with hundreds of rows, infinite feeds, and any scrollable UI where mounting all items would cause jank. It integrates cleanly with existing React patterns—items are just components, and you pass data through standard props.

The library requires external packages for features like infinite loading (react-window-infinite-loader) or responsive sizing (react-virtualized-auto-sizer). This modular approach keeps the core lightweight but means you'll compose multiple packages for advanced use cases. If you need a batteries-included solution with built-in infinite loaders and complex table support, consider react-virtualized instead, though it comes with a larger bundle.

Quick Start

typescript

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const generateItems = (count) => 
  Array.from({ length: count }, (_, i) => ({
    id: i,
    title: `Item ${i + 1}`,
    description: `This is the description for item number ${i + 1}`
  }));

const Row = ({ index, style, data }) => {
  const item = data[index];
  return (
    <div style={{
      ...style,
      borderBottom: '1px solid #eee',
      padding: '12px',
      display: 'flex',
      flexDirection: 'column'
    }}>
      <strong>{item.title}</strong>
      <span style={{ fontSize: '14px', color: '#666' }}>
        {item.description}
      </span>
    </div>
  );
};

const VirtualizedList = () => {
  const items = generateItems(10000);
  
  return (
    <List
      height={600}
      itemCount={items.length}
      itemSize={70}
      width="100%"
      itemData={items}
    >
      {Row}
    </List>
  );
};

export default VirtualizedList;

Use Cases

Large data tables: Render financial datasets, log viewers, or admin dashboards with 10,000+ rows without freezing the UI. Only visible rows exist in the DOM, so sorting and filtering remain responsive.

Chat applications: Display message histories spanning thousands of messages. As users scroll up through old messages, react-window mounts only the visible slice, keeping memory constant regardless of total message count.

E-commerce product grids: Show catalogs with hundreds of products in a scrollable grid. Variable-size support handles items with different aspect ratios or dynamic content like user reviews.

Dropdown menus with search: Render filterable dropdowns containing thousands of options (like country lists, user directories, or tag selectors) without lag during typing or scrolling.

Code editors and log viewers: Display large files or streaming logs line-by-line. Virtualization prevents the browser from choking on files with 50,000+ lines while maintaining smooth scrolling and search.

Pros & Cons

Pros

+Extremely lightweight bundle (~6KB minzipped) compared to react-virtualized's 27KB, reducing initial load time
+Simple API with minimal concepts—most use cases need only height, itemCount, itemSize, and a render function
+Excellent performance maintaining 60 FPS scrolling even with 100,000+ items by rendering only visible DOM nodes
+Well-maintained with 4M+ weekly downloads and active ecosystem of companion packages
+Works with both fixed and variable item sizes, supporting diverse layout requirements

Cons

−Requires external packages for common features like infinite loading (react-window-infinite-loader) or responsive sizing (react-virtualized-auto-sizer)
−No built-in support for dynamic item size measurement—you must know heights upfront or calculate them separately
−Limited built-in accessibility features compared to full-featured libraries; you handle ARIA attributes manually
−Horizontal scrolling and grid layouts have less documentation and fewer community examples than vertical lists
−Breaking layout changes or CSS transforms on scroll containers can cause rendering glitches requiring careful debugging

Alternatives

react-virtualizedv9.22.6

React components for efficiently rendering large, scrollable lists and tabular data

frontendreactreactjs

1.4M / week

Install

bash

npm install react-window

bash

pnpm add react-window

bash

bun add react-window

Overview

Quick Start

typescript

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const generateItems = (count) => 
  Array.from({ length: count }, (_, i) => ({
    id: i,
    title: `Item ${i + 1}`,
    description: `This is the description for item number ${i + 1}`
  }));

const Row = ({ index, style, data }) => {
  const item = data[index];
  return (
    <div style={{
      ...style,
      borderBottom: '1px solid #eee',
      padding: '12px',
      display: 'flex',
      flexDirection: 'column'
    }}>
      <strong>{item.title}</strong>
      <span style={{ fontSize: '14px', color: '#666' }}>
        {item.description}
      </span>
    </div>
  );
};

const VirtualizedList = () => {
  const items = generateItems(10000);
  
  return (
    <List
      height={600}
      itemCount={items.length}
      itemSize={70}
      width="100%"
      itemData={items}
    >
      {Row}
    </List>
  );
};

export default VirtualizedList;

Use Cases

E-commerce product grids: Show catalogs with hundreds of products in a scrollable grid. Variable-size support handles items with different aspect ratios or dynamic content like user reviews.

Dropdown menus with search: Render filterable dropdowns containing thousands of options (like country lists, user directories, or tag selectors) without lag during typing or scrolling.

Pros & Cons

Pros

+Extremely lightweight bundle (~6KB minzipped) compared to react-virtualized's 27KB, reducing initial load time
+Simple API with minimal concepts—most use cases need only height, itemCount, itemSize, and a render function
+Excellent performance maintaining 60 FPS scrolling even with 100,000+ items by rendering only visible DOM nodes
+Well-maintained with 4M+ weekly downloads and active ecosystem of companion packages
+Works with both fixed and variable item sizes, supporting diverse layout requirements

Cons

−Requires external packages for common features like infinite loading (react-window-infinite-loader) or responsive sizing (react-virtualized-auto-sizer)
−No built-in support for dynamic item size measurement—you must know heights upfront or calculate them separately
−Limited built-in accessibility features compared to full-featured libraries; you handle ARIA attributes manually
−Horizontal scrolling and grid layouts have less documentation and fewer community examples than vertical lists
−Breaking layout changes or CSS transforms on scroll containers can cause rendering glitches requiring careful debugging