react-window vs react-virtualized vs react-list vs react-tiny-virtual-list vs react-infinite | React Virtualization and Infinite Scrolling Libraries

Package	Downloads	Stars	Size	Issues	Publish	License

react-window	4,082,682	17,003	206 kB	1	a month ago	MIT
react-virtualized	1,397,107	27,045	2.24 MB	1	a year ago	MIT
react-list	424,887	1,973	34.9 kB	71	a year ago	MIT
react-tiny-virtual-list	97,294	2,496	-	54	7 years ago	MIT
react-infinite	10,184	2,692	243 kB	102	-	BSD-3-Clause

Package

Downloads

Stars

Size

Issues

Publish

License

react-window

4,082,682

17,003

206 kB

a month ago

MIT

react-virtualized

1,397,107

27,045

2.24 MB

a year ago

MIT

react-list

424,887

1,973

34.9 kB

a year ago

MIT

react-tiny-virtual-list

97,294

2,496

7 years ago

MIT

react-infinite

10,184

2,692

243 kB

102

BSD-3-Clause

Virtualization Technique

react-window:
react-window is a lightweight library for virtualization that focuses on simplicity and performance. It renders only the visible items in a list or grid, reducing the number of DOM nodes and improving rendering speed. It is designed to be easy to use while providing efficient virtualization for large datasets.
react-virtualized:
react-virtualized provides a comprehensive set of components for virtualization, including support for fixed and dynamic heights, grids, and tables. It is highly customizable and can handle complex layouts, making it suitable for a wide range of applications that require advanced virtualization techniques.
react-list:
react-list supports virtualization by rendering only the visible items in the list, which reduces the number of DOM nodes and improves performance. It can handle dynamic item heights, making it versatile for lists with varying content sizes.
react-tiny-virtual-list:
react-tiny-virtual-list uses virtualization to render only the items that are currently visible in the viewport. It is designed to be lightweight and efficient, minimizing the number of rendered items to improve performance, especially in large lists.
react-infinite:
react-infinite implements infinite scrolling by loading more items as the user scrolls down. It does not use virtualization, which means all items are rendered in the DOM, but it efficiently manages the loading of additional items to create a seamless scrolling experience.

Bundle Size

react-window:
react-window is a much smaller and more efficient alternative to react-virtualized, offering similar virtualization capabilities with a significantly reduced bundle size. This makes it ideal for modern applications that prioritize performance and quick load times.
react-virtualized:
react-virtualized is a feature-rich library, which means it comes with a larger bundle size compared to simpler solutions. However, the trade-off is worth it for applications that need advanced virtualization features and customization options.
react-list:
react-list is a lightweight library that adds minimal overhead to your bundle. It is designed to be efficient while providing the necessary features for virtualization and dynamic item rendering.
react-tiny-virtual-list:
react-tiny-virtual-list is designed to be ultra-lightweight, making it an excellent choice for projects where bundle size is a critical concern. Its minimalistic design ensures that you get virtualization without adding unnecessary weight to your application.
react-infinite:
react-infinite has a moderate bundle size, but it is not optimized for virtualization, which means it may not be the best choice for performance-sensitive applications with extremely large lists.

Dynamic Item Heights

react-window:
react-window supports dynamic item heights, but like react-tiny-virtual-list, it requires you to provide a way to calculate the height of each item. This feature allows it to efficiently render lists with varying item sizes while keeping the virtualization performance intact.
react-virtualized:
react-virtualized provides robust support for dynamic item heights, allowing you to create lists and grids where items can have different sizes. It includes components that can handle both fixed and variable heights, making it highly versatile for complex layouts.
react-list:
react-list supports dynamic item heights, allowing it to handle lists where items may have different sizes. This feature makes it more flexible and suitable for a wider range of use cases, including lists with images, text, or other variable content.
react-tiny-virtual-list:
react-tiny-virtual-list supports dynamic item heights, but it requires you to provide a function that calculates the height of each item. This allows it to accurately render items with varying heights while still benefiting from virtualization.
react-infinite:
react-infinite does not handle dynamic item heights natively, as it focuses on infinite scrolling rather than virtualization. This can be a limitation if your list items have varying heights and you need precise rendering.

Ease of Integration: Code Examples

react-window:

react-window is designed for easy integration, with a straightforward API that makes it simple to implement virtualization in your lists. It is well-suited for developers who want a quick and efficient solution without a steep learning curve. Example:

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

const MyWindowedList = ({ items }) => {
  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={50}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>{items[index]}</div>
      )}
    </FixedSizeList>
  );
};

react-virtualized:

react-virtualized may require more time to integrate due to its complexity and the wide range of features it offers. However, it is well-documented, and once you understand its components, it provides great flexibility and performance. Example:

import React from 'react';
import { List } from 'react-virtualized';

const MyVirtualizedList = ({ items }) => {
  return (
    <List
      width={300}
      height={400}
      rowCount={items.length}
      rowHeight={50}
      rowRenderer={({ index, style }) => (
        <div style={style}>{items[index]}</div>
      )}
    />
  );
};

react-list:

react-list is easy to integrate into existing projects, especially if you need a quick solution for lists with varying heights. Its API is simple, and it works well with both static and dynamic data. Example:

import React from 'react';
import { List } from 'react-list';

const MyList = ({ items }) => {
  return (
    <List
      itemRenderer={(index, key) => <div key={key}>{items[index]}</div>}
      length={items.length}
      type="uniform"
    />
  );
};

react-tiny-virtual-list:

Integrating react-tiny-virtual-list is quick and easy, thanks to its simple API and minimal configuration requirements. It is particularly well-suited for projects that need virtualization without a lot of complexity. Example:

import React from 'react';
import { VirtualList } from 'react-tiny-virtual-list';

const MyVirtualList = ({ items }) => {
  return (
    <VirtualList
      width={300}
      height={400}
      itemCount={items.length}
      itemSize={50}
      overscanCount={5}
      itemRenderer={({ index, style }) => (
        <div style={style}>{items[index]}</div>
      )}
    />
  );
};

react-infinite:

Integrating react-infinite is straightforward, especially for simple lists. Its API is easy to understand, and it requires minimal setup to get infinite scrolling working. However, it may require additional work to handle loading states and data fetching. Example:

import React from 'react';
import Infinite from 'react-infinite';

const InfiniteList = ({ items, loadMore }) => {
  return (
    <Infinite
      elementHeight={50}
      infiniteLoadBeginEdgeOffset={100}
      onInfiniteLoad={loadMore}
      isInfiniteLoading={false}
    >
      {items.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
    </Infinite>
  );
};

Documentation

Documentation for this project is available at react-window.vercel.app; version 1.x documentation can be found at react-window-v1.vercel.app.

List

Required props

Name	Description
rowComponent	React component responsible for rendering a row. This component will receive an `index` and `style` prop by default. Additionally it will receive prop values passed to `rowProps`. ℹ️ The prop types for this component are exported as `RowComponentProps`
rowCount	Number of items to be rendered in the list.
rowHeight	Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and `cellProps` dynamic row height cache returned by the `useDynamicRowHeight` hook ⚠️ Dynamic row heights are not as efficient as predetermined sizes. It's recommended to provide your own height values if they can be determined ahead of time.
rowProps	Additional props to be passed to the row-rendering component. List will automatically re-render rows when values in this object change. ⚠️ This object must not contain `ariaAttributes`, `index`, or `style` props.

Name

Description

rowComponent

React component responsible for rendering a row.

This component will receive an index and style prop by default. Additionally it will receive prop values passed to rowProps.

ℹ️ The prop types for this component are exported as RowComponentProps

rowCount

Number of items to be rendered in the list.

rowHeight

Row height; the following formats are supported:

number of pixels (number)
percentage of the grid's current height (string)
function that returns the row height (in pixels) given an index and cellProps
dynamic row height cache returned by the useDynamicRowHeight hook

⚠️ Dynamic row heights are not as efficient as predetermined sizes. It's recommended to provide your own height values if they can be determined ahead of time.

rowProps

Additional props to be passed to the row-rendering component. List will automatically re-render rows when values in this object change.

⚠️ This object must not contain ariaAttributes, index, or style props.

Optional props

Name	Description
className	CSS class name.
style	Optional CSS properties. The list of rows will fill the height defined by this style.
children	Additional content to be rendered within the list (above cells). This property can be used to render things like overlays or tooltips.
defaultHeight	Default height of list for initial render. This value is important for server rendering.
listRef	Ref used to interact with this component's imperative API. This API has imperative methods for scrolling and a getter for the outermost DOM element. ℹ️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.
onResize	Callback notified when the List's outermost HTMLElement resizes. This may be used to (re)scroll a row into view.
onRowsRendered	Callback notified when the range of visible rows changes.
overscanCount	How many additional rows to render outside of the visible area. This can reduce visual flickering near the edges of a list when scrolling.
tagName	Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.

Name

Description

className

CSS class name.

style

Optional CSS properties. The list of rows will fill the height defined by this style.

children

Additional content to be rendered within the list (above cells). This property can be used to render things like overlays or tooltips.

defaultHeight

Default height of list for initial render. This value is important for server rendering.

listRef

Ref used to interact with this component's imperative API.

This API has imperative methods for scrolling and a getter for the outermost DOM element.

ℹ️ The useListRef and useListCallbackRef hooks are exported for convenience use in TypeScript projects.

onResize

Callback notified when the List's outermost HTMLElement resizes. This may be used to (re)scroll a row into view.

onRowsRendered

Callback notified when the range of visible rows changes.

overscanCount

How many additional rows to render outside of the visible area. This can reduce visual flickering near the edges of a list when scrolling.

tagName

Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root.

⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.

Grid

Required props

Name	Description
cellComponent	React component responsible for rendering a cell. This component will receive an `index` and `style` prop by default. Additionally it will receive prop values passed to `cellProps`. ℹ️ The prop types for this component are exported as `CellComponentProps`
cellProps	Additional props to be passed to the cell-rendering component. Grid will automatically re-render cells when values in this object change. ⚠️ This object must not contain `ariaAttributes`, `columnIndex`, `rowIndex`, or `style` props.
columnCount	Number of columns to be rendered in the grid.
columnWidth	Column width; the following formats are supported: number of pixels (number) percentage of the grid's current width (string) function that returns the row width (in pixels) given an index and `cellProps`
rowCount	Number of rows to be rendered in the grid.
rowHeight	Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and `cellProps`

Name

Description

cellComponent

React component responsible for rendering a cell.

This component will receive an index and style prop by default. Additionally it will receive prop values passed to cellProps.

ℹ️ The prop types for this component are exported as CellComponentProps

cellProps

Additional props to be passed to the cell-rendering component. Grid will automatically re-render cells when values in this object change.

⚠️ This object must not contain ariaAttributes, columnIndex, rowIndex, or style props.

columnCount

Number of columns to be rendered in the grid.

columnWidth

Column width; the following formats are supported:

number of pixels (number)
percentage of the grid's current width (string)
function that returns the row width (in pixels) given an index and cellProps

rowCount

Number of rows to be rendered in the grid.

rowHeight

Row height; the following formats are supported:

number of pixels (number)
percentage of the grid's current height (string)
function that returns the row height (in pixels) given an index and cellProps

Optional props

Name	Description
className	CSS class name.
dir	Corresponds to the HTML dir attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir
style	Optional CSS properties. The grid of cells will fill the height and width defined by this style.
children	Additional content to be rendered within the grid (above cells). This property can be used to render things like overlays or tooltips.
defaultHeight	Default height of grid for initial render. This value is important for server rendering.
defaultWidth	Default width of grid for initial render. This value is important for server rendering.
gridRef	Ref used to interact with this component's imperative API. This API has imperative methods for scrolling and a getter for the outermost DOM element. ℹ️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.
onCellsRendered	Callback notified when the range of rendered cells changes.
onResize	Callback notified when the Grid's outermost HTMLElement resizes. This may be used to (re)scroll a cell into view.
overscanCount	How many additional rows/columns to render outside of the visible area. This can reduce visual flickering near the edges of a grid when scrolling.
tagName	Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.

Name

Description

className

CSS class name.

dir

Corresponds to the HTML dir attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir

style

Optional CSS properties. The grid of cells will fill the height and width defined by this style.

children

Additional content to be rendered within the grid (above cells). This property can be used to render things like overlays or tooltips.

defaultHeight

Default height of grid for initial render. This value is important for server rendering.

defaultWidth

Default width of grid for initial render. This value is important for server rendering.

gridRef

Ref used to interact with this component's imperative API.

This API has imperative methods for scrolling and a getter for the outermost DOM element.

ℹ️ The useGridRef and useGridCallbackRef hooks are exported for convenience use in TypeScript projects.

onCellsRendered

Callback notified when the range of rendered cells changes.

onResize

Callback notified when the Grid's outermost HTMLElement resizes. This may be used to (re)scroll a cell into view.

overscanCount

How many additional rows/columns to render outside of the visible area. This can reduce visual flickering near the edges of a grid when scrolling.

tagName

Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root.

⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.

Virtualization Technique

Bundle Size

Dynamic Item Heights

Ease of Integration: Code Examples

react-window

Support

Installation

TypeScript types

Documentation

List

Required props

Optional props

Grid

Required props

Optional props