react-window vs react-virtualized vs react-infinite-scroll-component vs react-infinite-scroller vs vue-virtual-scroller vs ngx-infinite-scroll vs vue-infinite-loading | Infinite Scrolling and Virtual Scrolling Libraries

Package	Downloads	Stars	Size	Issues	Publish	License

react-window	4,131,527	16,991	206 kB	1	a month ago	MIT
react-virtualized	1,405,675	27,039	2.24 MB	1	a year ago	MIT
react-infinite-scroll-component	937,864	3,048	169 kB	198	4 days ago	MIT
react-infinite-scroller	454,461	3,307	30.3 kB	98	-	MIT
vue-virtual-scroller	345,171	10,527	406 kB	247	-	MIT
ngx-infinite-scroll	314,530	1,257	70.3 kB	15	a day ago	MIT
vue-infinite-loading	72,540	2,662	-	78	6 years ago	MIT

Package

Downloads

Stars

Size

Issues

Publish

License

react-window

4,131,527

16,991

206 kB

a month ago

MIT

react-virtualized

1,405,675

27,039

2.24 MB

a year ago

MIT

react-infinite-scroll-component

937,864

3,048

169 kB

198

4 days ago

MIT

react-infinite-scroller

454,461

3,307

30.3 kB

MIT

vue-virtual-scroller

345,171

10,527

406 kB

247

MIT

ngx-infinite-scroll

314,530

1,257

70.3 kB

a day ago

MIT

vue-infinite-loading

72,540

2,662

6 years ago

MIT

Framework Compatibility

react-window:
react-window is a lightweight React library for virtualizing large lists and grids, designed to be simple and efficient while providing high performance for rendering only the visible items in a list.
react-virtualized:
react-virtualized is a React library that provides a set of components for efficiently rendering large lists, tables, and grids, making it suitable for a wide range of applications that require virtualization.
react-infinite-scroll-component:
react-infinite-scroll-component is built for React, offering a simple and customizable component for implementing infinite scrolling in React projects.
react-infinite-scroller:
react-infinite-scroller is a React-specific library that provides a straightforward way to implement infinite scrolling with minimal setup and configuration.
vue-virtual-scroller:
vue-virtual-scroller is a Vue.js library that implements virtual scrolling, rendering only the items that are visible in the viewport to improve performance when displaying large lists.
ngx-infinite-scroll:
ngx-infinite-scroll is specifically designed for Angular applications, leveraging Angular’s directive system to provide a seamless infinite scrolling experience.
vue-infinite-loading:
vue-infinite-loading is a Vue.js component that allows for easy implementation of infinite scrolling, providing a clean and intuitive API for Vue developers.

Performance

react-window:
react-window is designed for performance, with a focus on rendering only the visible items in a list or grid. It is more lightweight than react-virtualized, making it faster and more efficient for many use cases while still providing excellent virtualization capabilities.
react-virtualized:
react-virtualized is highly performant for rendering large lists and grids, as it only renders the visible items and provides features like windowing and row/column virtualization to minimize DOM updates.
react-infinite-scroll-component:
react-infinite-scroll-component is optimized for performance with features like customizable thresholds and loading indicators, ensuring smooth scrolling experiences even with large datasets.
react-infinite-scroller:
react-infinite-scroller provides good performance for infinite scrolling, especially when combined with efficient data fetching and rendering techniques.
vue-virtual-scroller:
vue-virtual-scroller is optimized for performance by only rendering the items that are currently visible in the viewport, which helps reduce memory usage and improve scrolling performance in applications with large lists.
ngx-infinite-scroll:
ngx-infinite-scroll is efficient for loading more content as the user scrolls, but its performance largely depends on how the infinite loading is implemented in the application.
vue-infinite-loading:
vue-infinite-loading is efficient for loading additional content as the user scrolls, but its performance can be affected by how quickly new data is fetched and rendered.

Customization

react-window:
react-window allows for customization of the rendering process, including support for variable row heights and custom item rendering, while keeping the API simple and easy to use.
react-virtualized:
react-virtualized provides a high level of customization for its components, allowing developers to create highly tailored solutions for rendering large datasets, including support for custom cell rendering, dynamic row heights, and more.
react-infinite-scroll-component:
react-infinite-scroll-component offers good customization options, including the ability to style the loading indicator, set scroll thresholds, and control the loading behavior, making it flexible for different use cases.
react-infinite-scroller:
react-infinite-scroller provides basic customization options, such as setting the threshold for when to load more content and customizing the loading indicator, but it is relatively simple and does not offer extensive styling capabilities.
vue-virtual-scroller:
vue-virtual-scroller allows for customization of the item rendering process, including support for variable item heights and the ability to use custom components for rendering items.
ngx-infinite-scroll:
ngx-infinite-scroll allows for some customization, such as setting the scroll threshold and loading indicators, but it is primarily a directive with limited styling options.
vue-infinite-loading:
vue-infinite-loading allows for customization of the loading indicator, the threshold for triggering loading, and other aspects, making it flexible for different design requirements.

Ease of Use: Code Examples

react-window:

react-window is designed to be simple and intuitive, making it easy for developers to implement virtual scrolling with minimal effort. Example:

import { FixedSizeList } from 'react-window';

const Example = () => {
  return (
    <FixedSizeList
      height={300}
      itemCount={items.length}
      itemSize={35}
      width={300}
    >
      {({ index }) => <div>{items[index]}</div>}
    </FixedSizeList>
  );
};

react-virtualized:

react-virtualized has a steeper learning curve due to its comprehensive feature set, but it offers powerful tools for optimizing the rendering of large datasets. Example:

import { List } from 'react-virtualized';

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

react-infinite-scroll-component:

react-infinite-scroll-component is user-friendly and provides a simple API for implementing infinite scrolling. Example:

import InfiniteScroll from 'react-infinite-scroll-component';

const Example = () => {
  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
    >
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </InfiniteScroll>
  );
};

react-infinite-scroller:

react-infinite-scroller is straightforward to implement, making it easy for developers to add infinite scrolling to their applications. Example:

import InfiniteScroller from 'react-infinite-scroller';

const Example = () => {
  return (
    <InfiniteScroller
      pageStart={0}
      loadMore={loadMoreData}
      hasMore={hasMore}
      loader={<div className="loader" key={0}>Loading ...</div>}
    >
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </InfiniteScroller>
  );
};

vue-virtual-scroller:

vue-virtual-scroller is straightforward to use, especially for developers familiar with Vue.js. Example:

<template>
  <virtual-scroller :items="items" :item-height="50">
    <template #default="{ item }">
      <div>{{ item }}</div>
    </template>
  </virtual-scroller>
</template>

ngx-infinite-scroll:

ngx-infinite-scroll is easy to use, especially for Angular developers. Its directive-based approach allows for quick integration with minimal setup. Example:

<ul>
  <li *ngFor="let item of items" class="item">{{ item }}</li>
</ul>
<div
  infiniteScroll
  [infiniteScrollDistance]="scrollDistance"
  [infiniteScrollUpDistance]="scrollUpDistance"
  [infiniteScrollDownDistance]="scrollDownDistance"
  (infiniteScroll)="loadData()"
></div>

vue-infinite-loading:

vue-infinite-loading is easy to integrate into Vue applications, with a simple and clear API. Example:

<template>
  <infinite-loading
    @infinite="loadMore"
    :has-infinite="hasMore"
    :spinner="spinner"
  >
    <template #default>
      <div v-for="item in items" :key="item.id">{{ item.name }}</div>
    </template>
  </infinite-loading>
</template>

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.

Framework Compatibility

Performance

Customization

Ease of Use: Code Examples

react-window

Support

Installation

TypeScript types

Documentation

List

Required props

Optional props

Grid

Required props

Optional props