React Infinite Scrolling Libraries Comparison
react-window vs react-virtualized vs react-list vs react-window-infinite-loader vs react-virtual vs react-infinite
1 Year
react-windowreact-virtualizedreact-listreact-window-infinite-loaderreact-virtualreact-infiniteSimilar Packages:
What's 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 Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-window1,992,67815,990896 kB4a year agoMIT
react-virtualized952,97526,4412.2 MB52 years agoMIT
react-list297,9061,96337.3 kB71-MIT
react-window-infinite-loader286,33791928.8 kB22 years agoMIT
react-virtual285,4285,608158 kB70-MIT
react-infinite13,4642,706243 kB102-BSD-3-Clause
Feature Comparison: react-window vs react-virtualized vs react-list vs react-window-infinite-loader vs react-virtual vs react-infinite

Performance Optimization

  • react-window:

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

  • 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-list:

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

  • react-window-infinite-loader:

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

  • 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-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.

Ease of Use

  • react-window:

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

  • react-virtualized:

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

  • react-list:

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

  • 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-virtual:

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

  • 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.

Flexibility and Customization

  • react-window:

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

  • react-virtualized:

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

  • react-list:

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

  • react-window-infinite-loader:

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

  • react-virtual:

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

  • react-infinite:

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

Community and Support

  • react-window:

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

  • react-virtualized:

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

  • react-list:

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

  • react-window-infinite-loader:

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

  • react-virtual:

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

  • react-infinite:

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

Integration with Other Libraries

  • react-window:

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

  • react-virtualized:

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

  • react-list:

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

  • react-window-infinite-loader:

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

  • react-virtual:

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

  • react-infinite:

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

How to Choose: react-window vs react-virtualized vs react-list vs react-window-infinite-loader vs react-virtual vs react-infinite
  • 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.

  • 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-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-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-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-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.

README for react-window

react-window

React components for efficiently rendering large lists and tabular data

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


React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

  1. It reduces the amount of work (and time) required to render the initial view and to process updates.
  2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.

Sponsors

The following wonderful companies have sponsored react-window:

Learn more about becoming a sponsor!

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).
  • react-vtree: Lightweight and flexible solution to render large tree structures (e.g., file system).

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 smaller1 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:

screen shot 2019-03-07 at 7 29 08 pm

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!

screen shot 2019-03-07 at 7 21 48 pm

Can I lazy load data for my list?

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

screen shot 2019-03-07 at 7 32 32 pm

Here's a Code Sandbox demo.

Can I attach custom properties or event handlers?

Yes, using the outerElementType prop.

Screen Shot 2019-03-12 at 8 58 09 AM

Here's a Code Sandbox demo.

Can I add padding to the top and bottom of a list?

Yes, although it requires a bit of inline styling.

Screen Shot 2019-06-02 at 8 38 18 PM

Here's a Code Sandbox demo.

Can I add gutter or padding between items?

Yes, although it requires a bit of inline styling.

Screen Shot 2019-03-26 at 6 33 56 PM

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