react-window vs rc-virtual-list vs react-virtualized vs react-infinite-scroll-component
React Virtualization Libraries Comparison
1 Year
react-windowrc-virtual-listreact-virtualizedreact-infinite-scroll-componentSimilar Packages:
What's React Virtualization Libraries?

React virtualization libraries are designed to efficiently render large lists or tables of data by only displaying the items that are currently visible in the viewport. This approach significantly improves performance and reduces memory usage, especially when dealing with extensive datasets. By rendering only a subset of data at any given time, these libraries help maintain smooth scrolling and responsiveness in user interfaces, making them essential for applications that handle large amounts of information.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-window2,567,95716,266896 kB33 months agoMIT
rc-virtual-list1,669,137758148 kB78a day agoMIT
react-virtualized1,033,42826,6412.24 MB2a month agoMIT
react-infinite-scroll-component773,9792,939-1944 years agoMIT
Feature Comparison: react-window vs rc-virtual-list vs react-virtualized vs react-infinite-scroll-component

Performance Optimization

  • react-window:

    react-window is designed for performance with a minimal footprint. It uses a similar windowing technique as react-virtualized but is more lightweight, making it ideal for applications that need to render large lists without the overhead of additional features.

  • rc-virtual-list:

    rc-virtual-list optimizes rendering by only displaying visible items in the viewport, thus minimizing the number of DOM nodes created. It supports dynamic heights, allowing for efficient rendering of lists with variable item sizes, which enhances performance in complex layouts.

  • react-virtualized:

    react-virtualized excels in performance by implementing techniques like windowing and lazy loading. It can handle thousands of rows and columns efficiently, making it suitable for applications that require extensive data manipulation and display.

  • react-infinite-scroll-component:

    This library optimizes performance by loading additional data only when the user scrolls to the bottom of the list. It prevents unnecessary rendering of off-screen items, ensuring a smooth user experience even with large datasets.

Ease of Use

  • react-window:

    react-window is designed with simplicity in mind, offering a clean and minimal API. It is easy to integrate into existing projects, making it a great choice for developers who want quick results without extensive configuration.

  • rc-virtual-list:

    rc-virtual-list offers a flexible API that allows developers to customize the rendering of list items easily. However, its flexibility may introduce a steeper learning curve for those unfamiliar with virtualization concepts.

  • react-virtualized:

    While react-virtualized provides a rich set of features, it can be complex to set up due to its extensive API. Developers may need to invest time in understanding its various components to fully leverage its capabilities.

  • react-infinite-scroll-component:

    This library is very easy to implement, requiring minimal configuration to get started. Its straightforward API makes it accessible for developers looking to add infinite scrolling to their applications quickly.

Feature Set

  • react-window:

    react-window provides a minimal set of features focused on list and grid rendering, making it lightweight. It is suitable for applications that need basic virtualization without the overhead of additional functionalities.

  • rc-virtual-list:

    rc-virtual-list focuses on providing a customizable virtual list experience with support for dynamic item heights and custom rendering. It is particularly useful for applications that require a high degree of customization in their lists.

  • react-virtualized:

    react-virtualized offers a comprehensive suite of components for rendering lists, tables, and grids, along with utilities for handling complex interactions. It is ideal for applications that require advanced data presentation features.

  • react-infinite-scroll-component:

    This library specializes in infinite scrolling but does not provide extensive features beyond that. It is best for applications that need a simple way to implement scrolling behavior without additional complexities.

Community and Support

  • react-window:

    react-window benefits from a growing community and is well-documented, although it may not have as many resources as react-virtualized. Its simplicity helps developers quickly understand and implement its features.

  • rc-virtual-list:

    rc-virtual-list has a growing community, but it may not have as extensive resources or documentation compared to more established libraries. Support may be limited to community forums and GitHub issues.

  • react-virtualized:

    react-virtualized has a large and active community, with extensive documentation and numerous examples available. This makes it easier for developers to find solutions to problems and share best practices.

  • react-infinite-scroll-component:

    This library has a supportive community and is well-documented, making it easy for developers to find help and examples. Its popularity ensures that common issues are often addressed in community discussions.

Customization

  • react-window:

    react-window offers basic customization options, focusing on performance and simplicity. While it allows for some adjustments, it may not provide the same level of customization as react-virtualized.

  • rc-virtual-list:

    rc-virtual-list allows for high levels of customization, enabling developers to define how items are rendered and how the list behaves. This flexibility is beneficial for applications with unique requirements.

  • react-virtualized:

    react-virtualized provides extensive customization options for its components, allowing developers to tailor the appearance and behavior of lists and grids to fit their needs. This is particularly useful for complex applications.

  • react-infinite-scroll-component:

    Customization options are somewhat limited, focusing primarily on infinite scrolling behavior. Developers can adjust loading indicators and thresholds, but deeper customization may require additional work.

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

    Choose react-window for a lightweight and efficient solution focused on rendering large lists and grids with a minimal API. It is a great choice for projects that prioritize performance and simplicity, especially when you don't need the extensive features offered by react-virtualized.

  • rc-virtual-list:

    Choose rc-virtual-list if you need a highly customizable virtual list solution that supports dynamic heights and complex item rendering. It is particularly useful when you have variable-sized items and want to optimize performance without sacrificing flexibility.

  • react-virtualized:

    Opt for react-virtualized when you need a comprehensive set of features for rendering large lists, tables, and grids. It provides a wide range of components and utilities for handling complex layouts and interactions, making it suitable for applications that require advanced data presentation capabilities.

  • react-infinite-scroll-component:

    Select react-infinite-scroll-component if your application requires infinite scrolling functionality with minimal setup. It is straightforward to implement and ideal for scenarios where new data is fetched as the user scrolls down, making it perfect for feeds or lists that grow dynamically.

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