react-window vs react-virtualized vs react-infinite-scroll-component vs react-viewport-list
React Virtualization and Infinite Scrolling Libraries Comparison
1 Year
react-windowreact-virtualizedreact-infinite-scroll-componentreact-viewport-listSimilar Packages:
What's React Virtualization and Infinite Scrolling Libraries?

These libraries are designed to enhance the performance of React applications by efficiently rendering large lists or grids of data. They help in optimizing rendering times and improving user experience by only rendering visible items in the viewport, thus reducing the amount of DOM nodes created and managed. Each library has its unique approach and features, catering to different use cases and developer preferences.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-window2,858,93216,380896 kB24 months agoMIT
react-virtualized1,065,36126,7352.24 MB23 months agoMIT
react-infinite-scroll-component751,8582,958-1954 years agoMIT
react-viewport-list30,67423253.9 kB8a year agoMIT
Feature Comparison: react-window vs react-virtualized vs react-infinite-scroll-component vs react-viewport-list

Rendering Efficiency

  • react-window:

    A lightweight alternative to react-virtualized, react-window provides efficient rendering of large lists and grids by only rendering visible items. It is optimized for performance and is easy to integrate into existing applications.

  • react-virtualized:

    This package excels in rendering large lists and tables by implementing windowing techniques. It only renders items that are visible in the viewport, and it can handle variable item sizes, making it highly efficient for large datasets.

  • react-infinite-scroll-component:

    This package provides a simple way to implement infinite scrolling, loading new data as the user scrolls down. It optimizes rendering by only displaying items that are currently in view, which can significantly reduce the number of DOM nodes and improve performance.

  • react-viewport-list:

    This library efficiently renders only the items that are visible in the viewport, allowing for dynamic height calculations and smooth scrolling experiences. It is designed to handle complex lists and offers more control over rendering behavior compared to simpler solutions.

Customization

  • react-window:

    Offers basic customization options but is more focused on performance than extensive feature sets. It is suitable for applications that need a straightforward implementation without the complexity of additional features.

  • react-virtualized:

    Highly customizable with a wide range of features, including cell measurement, dynamic heights, and more. It allows developers to fine-tune the rendering process to fit specific application needs, making it ideal for complex data displays.

  • react-infinite-scroll-component:

    While it offers basic customization options for loading indicators and thresholds, it is primarily focused on simplicity and ease of use, making it less flexible for complex scenarios.

  • react-viewport-list:

    This library allows for significant customization in terms of rendering logic and item heights, making it suitable for applications that require tailored solutions for unique list structures.

Learning Curve

  • react-window:

    With a simple API and straightforward implementation, react-window has a low learning curve, making it accessible for developers looking to add virtualization to their applications.

  • react-virtualized:

    This library has a steeper learning curve due to its extensive features and configuration options. Developers may need to invest time in understanding its API and how to effectively implement its capabilities.

  • react-infinite-scroll-component:

    This package has a low learning curve, making it easy for developers to implement infinite scrolling quickly without extensive configuration or setup.

  • react-viewport-list:

    The learning curve is moderate, as it requires understanding viewport management and dynamic item rendering, which may take some time for developers unfamiliar with these concepts.

Community and Support

  • react-window:

    With a strong community and solid documentation, react-window is well-supported, making it a reliable choice for developers.

  • react-virtualized:

    This library has a large community and extensive documentation, making it easier for developers to find support and resources for implementation.

  • react-infinite-scroll-component:

    This package has a growing community and is actively maintained, providing good support and documentation for developers.

  • react-viewport-list:

    While it has a smaller community compared to others, it is still actively maintained and offers decent documentation for users.

Performance

  • react-window:

    Focused on performance, react-window is lightweight and optimized for rendering large lists and grids without unnecessary overhead.

  • react-virtualized:

    Designed for high performance with large datasets, it minimizes rendering costs and is capable of handling thousands of items efficiently.

  • react-infinite-scroll-component:

    Performance is generally good for standard use cases, but it may not handle extremely large datasets as efficiently as more specialized libraries.

  • react-viewport-list:

    Offers excellent performance for complex lists, especially when dynamic heights are involved, as it optimizes rendering based on the viewport.

How to Choose: react-window vs react-virtualized vs react-infinite-scroll-component vs react-viewport-list
  • react-window:

    Choose this package for a lightweight and simple approach to virtualization. It is suitable for applications that need efficient rendering of large lists or grids without the overhead of additional features, making it a great choice for performance-sensitive applications.

  • react-virtualized:

    Select this package if you need a comprehensive solution for rendering large lists and tabular data with advanced features like cell measurement and windowing. It is best for applications that require high performance and flexibility in rendering large datasets.

  • react-infinite-scroll-component:

    Choose this package if you need a straightforward solution for implementing infinite scrolling with minimal setup. It is ideal for applications where new data is loaded as the user scrolls down, such as social media feeds or image galleries.

  • react-viewport-list:

    Opt for this package if you require a highly customizable solution for rendering lists based on the viewport. It allows for more control over the rendering process and is suitable for applications that need to manage complex lists with dynamic heights.

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