react-virtualized vs react-window-infinite-loader vs react-infinite vs react-list vs react-virtual vs react-window
React Infinite Scrolling Libraries
react-virtualizedreact-window-infinite-loaderreact-infinitereact-listreact-virtualreact-windowSimilar Packages:

React Infinite Scrolling Libraries

These libraries provide various solutions for implementing infinite scrolling in React applications, allowing developers to efficiently render large lists of data without compromising performance. They utilize techniques such as virtualization and windowing to only render visible items, improving load times and user experience. Each library has its own unique features and design principles, catering to different use cases and developer preferences.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
react-virtualized1,354,08727,0822.24 MB1a year agoMIT
react-window-infinite-loader532,82495223 kB02 months agoMIT
react-infinite7,6162,687243 kB102-BSD-3-Clause
react-list01,97434.9 kB71a year agoMIT
react-virtual06,760158 kB105-MIT
react-window017,128209 kB1a month agoMIT

Feature Comparison: react-virtualized vs react-window-infinite-loader vs react-infinite vs react-list vs react-virtual vs react-window

Performance Optimization

  • react-virtualized:

    react-virtualized offers advanced performance optimizations, including windowing and dynamic row heights, making it suitable for complex applications with large data sets.

  • react-window-infinite-loader:

    react-window-infinite-loader combines virtualization with infinite scrolling, ensuring that performance remains high while loading additional data.

  • react-infinite:

    react-infinite loads more items as the user scrolls, but does not implement virtualization, which may lead to performance issues with very large datasets.

  • react-list:

    react-list optimizes rendering by allowing for dynamic heights and only rendering visible items, making it efficient for large lists.

  • react-virtual:

    react-virtual focuses solely on virtualization, ensuring that only the items in view are rendered, providing excellent performance even with large datasets.

  • react-window:

    react-window is designed for performance with a smaller footprint, focusing on rendering only visible items, which improves load times and responsiveness.

Ease of Use

  • react-virtualized:

    react-virtualized has a steeper learning curve due to its extensive features, but it offers powerful capabilities for complex use cases.

  • react-window-infinite-loader:

    react-window-infinite-loader is easy to use, especially for those already familiar with react-window, providing a seamless integration for infinite scrolling.

  • react-infinite:

    react-infinite is easy to set up and use, making it a good choice for developers looking for a quick implementation of infinite scrolling.

  • react-list:

    react-list provides a flexible API but may require more configuration, making it slightly more complex than simpler libraries.

  • react-virtual:

    react-virtual is straightforward and lightweight, making it easy to integrate into projects without a steep learning curve.

  • react-window:

    react-window is designed to be simple and intuitive, making it easy for developers to implement virtualization without much overhead.

Flexibility and Customization

  • react-virtualized:

    react-virtualized is very flexible, offering a wide range of customization options for complex lists, including sorting and filtering.

  • react-window-infinite-loader:

    react-window-infinite-loader is built on react-window, allowing for customization while maintaining the benefits of virtualization.

  • react-infinite:

    react-infinite offers limited customization options, focusing primarily on infinite scrolling without extensive features.

  • react-list:

    react-list is highly customizable, allowing developers to define item heights and rendering logic, making it suitable for varied use cases.

  • react-virtual:

    react-virtual provides basic virtualization features but is not as customizable as some other options.

  • react-window:

    react-window offers basic customization for item rendering, making it suitable for most standard use cases without overwhelming complexity.

Community and Support

  • react-virtualized:

    react-virtualized has a large community and extensive documentation, making it a reliable choice for developers needing support.

  • react-window-infinite-loader:

    react-window-infinite-loader benefits from the support of the react-window community, ensuring good documentation and resources.

  • react-infinite:

    react-infinite has a smaller community and less frequent updates, which may affect long-term support.

  • react-list:

    react-list has a moderate community and is actively maintained, providing a decent level of support and documentation.

  • react-virtual:

    react-virtual is newer and has a smaller community, but it is gaining traction for its simplicity and performance.

  • react-window:

    react-window is well-supported with a growing community, making it easy to find resources and help.

Integration with Other Libraries

  • react-virtualized:

    react-virtualized can be integrated with other libraries but may require more setup due to its complexity.

  • react-window-infinite-loader:

    react-window-infinite-loader integrates seamlessly with react-window, making it easy to implement infinite scrolling in existing projects.

  • react-infinite:

    react-infinite can be integrated easily with other libraries but may require additional handling for complex scenarios.

  • react-list:

    react-list works well with various state management libraries, allowing for easy integration into existing applications.

  • react-virtual:

    react-virtual is lightweight and can be easily integrated with other libraries without much overhead.

  • react-window:

    react-window is designed for easy integration with other libraries and frameworks, making it a versatile choice.

How to Choose: react-virtualized vs react-window-infinite-loader vs react-infinite vs react-list vs react-virtual vs react-window

  • react-virtualized:

    Choose react-virtualized for a comprehensive solution that includes a wide range of features such as sorting, filtering, and dynamic row heights. It is suitable for complex applications that require advanced list management.

  • react-window-infinite-loader:

    Use react-window-infinite-loader if you need to combine infinite scrolling with virtualization. It is perfect for scenarios where you want to load more items as the user scrolls, while keeping the performance benefits of virtualization.

  • react-infinite:

    Choose react-infinite for a straightforward implementation of infinite scrolling with minimal configuration. It is suitable for simple lists where you want to load more items as the user scrolls down.

  • react-list:

    Select react-list if you need a highly customizable and flexible solution for rendering large lists. It allows for dynamic item heights and provides more control over the rendering process.

  • react-virtual:

    Opt for react-virtual if you want a lightweight library focused on virtualization. It is ideal for applications where performance is critical and you need to render large datasets efficiently without complex features.

  • react-window:

    Select react-window for a simplified and smaller alternative to react-virtualized. It is great for basic virtualization needs and is easier to integrate into existing projects.

README for react-virtualized

React virtualized

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples.

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

Sponsors

The following wonderful companies have sponsored react-virtualized:

Learn more about becoming a sponsor!

A word about react-window

If you're considering adding react-virtualized to a project, take a look at react-window as a possible lighter-weight alternative. Learn more about how the two libraries compare here.

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';

// You can import any component you want as a named export from 'react-virtualized', eg
import {Column, Table} from 'react-virtualized';

// But if you only use a few react-virtualized components,
// And you're concerned about increasing your application's bundle size,
// You can directly import only the components you need, like so:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

Note webpack 4 makes this optimization itself, see the documentation.

If the above syntax looks too cumbersome, or you import react-virtualized components from a lot of places, you can also configure a Webpack alias. For example:

// Partial webpack.config.js
{
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',
  },
  ...rest
}

Then you can just import like so:

import List from 'react-virtualized/List';

// Now you can use <List {...props} />

You can also use a global-friendly UMD build:

<link rel="stylesheet" href="path-to-react-virtualized/styles.css" />
<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>

Now you're ready to start using the components. You can learn more about which components react-virtualized has to offer below.

Dependencies

React Virtualized has very few dependencies and most are managed by NPM automatically. However the following peer dependencies must be specified by your project in order to avoid version conflicts: react, react-dom. NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.

Pure Components

By default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed. This occasionally confuses users when a collection's data changes (eg ['a','b','c'] => ['d','e','f']) but props do not (eg array.length).

The solution to this is to let react-virtualized know that something external has changed. This can be done a couple of different ways.

Pass-thru props

The shallowCompare method will detect changes to any props, even if they aren't declared as propTypes. This means you can also pass through additional properties that affect cell rendering to ensure changes are detected. For example, if you're using List to render a list of items that may be re-sorted after initial render- react-virtualized would not normally detect the sort operation because none of the properties it deals with change. However you can pass through the additional sort property to trigger a re-render. For example:

<List {...listProps} sortBy={sortBy} />
Public methods

Grid and Collection components can be forcefully re-rendered using forceUpdate. For Table and List, you'll need to call forceUpdateGrid to ensure that the inner Grid is also updated. For MultiGrid, you'll need to call forceUpdateGrids to ensure that the inner Grids are updated.

Documentation

API documentation available here.

There are also a couple of how-to guides:

Examples

Examples for each component can be seen in the documentation.

Here are some online demos of each component:

And here are some "recipe" type demos:

Supported Browsers

react-virtualized aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported (although IE 9 will require some user-defined, custom CSS since flexbox layout is not supported).

If you find a browser-specific problem, please report it along with a repro case. The easiest way to do this is probably by forking this Plunker.

Friends

Here are some great components built on top of react-virtualized:

  • react-infinite-calendar: Infinite scrolling date-picker with localization, themes, keyboard support, and more
  • react-sortable-hoc: Higher-order components to turn any list into an animated, touch-friendly, sortable list
  • react-sortable-tree: Drag-and-drop sortable representation of hierarchical data
  • react-virtualized-checkbox: Checkbox group component with virtualization for large number of options
  • react-virtualized-select: Drop-down menu for React with windowing to support large numbers of options.
  • react-virtualized-tree: A reactive tree component that aims to render large sets of tree structured data in an elegant and performant way
  • react-timeline-9000: A calendar timeline component that is capable of displaying and interacting with a large number of items

Contributions

Use GitHub issues for requests.

I actively welcome pull requests; learn how to contribute.

Changelog

Changes are tracked in the changelog.

License

react-virtualized is available under the MIT License.