react-window

What is react-window?

The react-window npm package is a React component library that provides efficient rendering of large lists and tabular data. It works by only rendering the items that are currently visible within the viewport, which can significantly improve the performance of applications that need to display large amounts of data.

What are react-window's main functionalities?

Fixed Size List

This feature allows you to render a list where each item has a fixed size. The FixedSizeList component requires you to specify the height and width of the list container, the number of items, and the size of each item.

import { FixedSizeList } from 'react-window';

function App() {
  return (
    <FixedSizeList
      height={150}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {({ index, style }) => <div style={style}>Row {index}</div>}
    </FixedSizeList>
  );
}

Variable Size List

This feature is similar to the FixedSizeList but allows for items with variable sizes. The VariableSizeList component requires an itemSize function that returns the size of an item given its index.

import { VariableSizeList } from 'react-window';

const rowHeights = new Array(1000).fill(true).map(() => 25 + Math.round(Math.random() * 50));

function App() {
  return (
    <VariableSizeList
      height={150}
      itemCount={1000}
      itemSize={index => rowHeights[index]}
      width={300}
    >
      {({ index, style }) => <div style={style}>Row {index}</div>}
    </VariableSizeList>
  );
}

Fixed Size Grid

The FixedSizeGrid component allows you to render a grid (or table) where each cell has a fixed size. You need to specify the dimensions of the grid, the size of each cell, and the number of rows and columns.

import { FixedSizeGrid } from 'react-window';

function App() {
  return (
    <FixedSizeGrid
      columnCount={100}
      columnWidth={100}
      height={150}
      rowCount={1000}
      rowHeight={35}
      width={300}
    >
      {({ columnIndex, rowIndex, style }) => <div style={style}>Cell {rowIndex},{columnIndex}</div>}
    </FixedSizeGrid>
  );
}

Variable Size Grid

The VariableSizeGrid component is used for rendering a grid where the size of cells can vary. It requires functions to determine the height of rows and the width of columns based on their indices.

import { VariableSizeGrid } from 'react-window';

const columnWidths = new Array(100).fill(true).map(() => 75 + Math.round(Math.random() * 50));
const rowHeights = new Array(1000).fill(true).map(() => 25 + Math.round(Math.random() * 50));

function App() {
  return (
    <VariableSizeGrid
      columnCount={100}
      columnWidth={index => columnWidths[index]}
      height={150}
      rowCount={1000}
      rowHeight={index => rowHeights[index]}
      width={300}
    >
      {({ columnIndex, rowIndex, style }) => <div style={style}>Cell {rowIndex},{columnIndex}</div>}
    </VariableSizeGrid>
  );
}

Other packages similar to react-window

react-virtualized

React-virtualized is another popular library for efficiently rendering large lists and tabular data in React applications. It offers a similar set of features to react-window but includes additional functionality such as cell measuring and dynamic grid layouts. However, react-window is often preferred for its simpler API and better performance in common use cases.

react-infinite

React-infinite is a package that helps in building infinite scrolling lists in React. It differs from react-window in that it focuses on providing an infinite scrolling experience rather than just windowing. React-infinite may be more suitable for use cases where the list length is not known upfront or can grow dynamically.

react-list

React-list is a versatile infinite scroll React component. It supports variable lengths, dynamic item sizes, horizontal layouts, and more. Compared to react-window, react-list has a more flexible API but may not be as optimized for performance in rendering large datasets.

README

react-window

React components for efficiently rendering large lists and tabular data

Install

# Yarn
yarn add react-window

# NPM
npm install --save react-window

Usage

Learn more at react-window.now.sh:

Related libraries

• react-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.
• react-window-infinite-loader: Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).

Frequently asked questions

How is react-window different from react-virtualized?

I wrote react-virtualized several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.

react-window is a complete rewrite of react-virtualized. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package smaller¹ and faster. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).

If react-window provides the functionality your project needs, I would strongly recommend using it instead of react-virtualized. However if you need features that only react-virtualized provides, you have two options:

1. Use react-virtualized. (It's still widely used by a lot of successful projects!)
2. Create a component that decorates one of the react-window primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂

^{1 - Adding a react-virtualized list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a react-window list to a CRA project increases the (gzipped) build size by <2 KB.}

Can a list or a grid fill 100% the width or height of a page?

Yes. I recommend using the react-virtualized-auto-sizer package:

Here's a Code Sandbox demo.

Why is my list blank when I scroll?

If your list looks something like this...

...then you probably forgot to use the style parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!

Can I lazy load data for my list?

Yes. I recommend using the react-window-infinite-loader package:

Here's a Code Sandbox demo.

Can I attach custom properties or event handlers?

Yes, using the outerElementType prop.

Here's a Code Sandbox demo.

Can I add gutter or padding between items?

Yes, although it requires a bit of inline styling.

Here's a Code Sandbox demo.

Does this library support "sticky" items?

Yes, although it requires a small amount of user code. Here's a Code Sandbox demo.

License

MIT © bvaughn

Changelog

1.8.0

• 🎉 Added new "smart" align option for grid and list scroll-to-item methods (gaearon - #209)