React Virtualization Libraries Comparison
react-window vs react-virtualized vs react-list vs react-tiny-virtual-list vs react-infinite
1 Year
react-windowreact-virtualizedreact-listreact-tiny-virtual-listreact-infiniteSimilar Packages:
What's React Virtualization Libraries?

React virtualization libraries are designed to efficiently render large lists and tables by only displaying the visible items in the viewport, significantly improving performance and user experience. These libraries help in managing memory and rendering time by reducing the number of DOM nodes created, which is crucial for applications that handle large datasets. By implementing virtualization, developers can create smooth scrolling experiences and maintain responsiveness even when dealing with thousands of items.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-window2,318,08916,034896 kB4a year agoMIT
react-virtualized1,054,27526,4752.2 MB52 years agoMIT
react-list324,3401,96334.9 kB715 days agoMIT
react-tiny-virtual-list79,8762,470-546 years agoMIT
react-infinite15,5182,705243 kB102-BSD-3-Clause
Feature Comparison: react-window vs react-virtualized vs react-list vs react-tiny-virtual-list vs react-infinite

Performance Optimization

  • react-window:

    react-window is a lightweight library that focuses on performance by rendering only the visible items in a list, making it suitable for applications that require efficient rendering without unnecessary complexity.

  • react-virtualized:

    react-virtualized offers extensive performance optimizations, including windowing and dynamic heights, making it ideal for applications with complex data structures and large datasets.

  • react-list:

    react-list provides basic virtualization by only rendering the visible items, which improves performance for smaller lists, but may not handle very large datasets as efficiently as others.

  • react-tiny-virtual-list:

    react-tiny-virtual-list is designed for high performance with minimal overhead, supporting variable item heights while ensuring that only visible items are rendered, making it suitable for dynamic content.

  • react-infinite:

    react-infinite efficiently loads additional items as the user scrolls down, minimizing the number of DOM nodes rendered at any time, which enhances performance for large datasets.

Feature Set

  • react-window:

    react-window provides a simplified API for basic list and grid virtualization, focusing on performance and ease of use without the complexity of additional features.

  • react-virtualized:

    react-virtualized is feature-rich, supporting both lists and grids, dynamic heights, and complex layouts, making it suitable for applications that require extensive customization and flexibility.

  • react-list:

    react-list offers a simple API for rendering lists with basic virtualization, but does not include advanced features like grid layouts or dynamic item sizes.

  • react-tiny-virtual-list:

    react-tiny-virtual-list supports variable item heights and is optimized for performance, making it versatile for different use cases while keeping the API straightforward.

  • react-infinite:

    react-infinite provides basic infinite scrolling functionality, allowing for easy integration of loading more items as the user scrolls, but lacks advanced features like grid support or dynamic heights.

Ease of Use

  • react-window:

    react-window is designed for simplicity and ease of use, making it a great choice for developers who want to implement virtualization without unnecessary complexity.

  • react-virtualized:

    react-virtualized has a steeper learning curve due to its extensive feature set, which may require more time to understand and implement effectively.

  • react-list:

    react-list has a simple API that is easy to understand, making it accessible for developers who need basic virtualization without a steep learning curve.

  • react-tiny-virtual-list:

    react-tiny-virtual-list is designed to be minimalistic and easy to use, allowing developers to quickly implement virtualization with variable item heights.

  • react-infinite:

    react-infinite is easy to set up and use, making it a good choice for developers looking for a straightforward solution for infinite scrolling without much configuration.

Community and Support

  • react-window:

    react-window, being a lightweight alternative to react-virtualized, has a supportive community and good documentation, making it easy to find help and resources.

  • react-virtualized:

    react-virtualized has a large and active community, offering extensive documentation, examples, and support, making it a reliable choice for complex applications.

  • react-list:

    react-list has a modest community, providing basic support and documentation, but may not have extensive resources available.

  • react-tiny-virtual-list:

    react-tiny-virtual-list has a growing community and is gaining popularity, which may lead to improved support and resources in the future.

  • react-infinite:

    react-infinite has a smaller community compared to others, which may result in limited support and fewer updates over time.

Customization

  • react-window:

    react-window offers basic customization options while maintaining a lightweight footprint, making it easy to adapt to various use cases without excessive complexity.

  • react-virtualized:

    react-virtualized is highly customizable, allowing developers to create complex layouts and styles, making it suitable for applications that require detailed control over rendering.

  • react-list:

    react-list allows for some customization, but it is primarily designed for basic list rendering without advanced styling options.

  • react-tiny-virtual-list:

    react-tiny-virtual-list provides flexibility in item rendering, allowing developers to customize how items are displayed while maintaining performance.

  • react-infinite:

    react-infinite offers limited customization options, focusing primarily on infinite scrolling functionality without extensive styling capabilities.

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

    Select react-window if you want a lightweight alternative to react-virtualized that is easier to use and maintain. It is perfect for applications that need basic virtualization without the overhead of additional features.

  • react-virtualized:

    Choose react-virtualized for a comprehensive solution that offers a wide range of features including grid layouts, dynamic heights, and extensive customization options. It is suitable for complex applications that require robust virtualization capabilities.

  • react-list:

    Select react-list if you require a lightweight solution that provides basic virtualization capabilities for lists. It is suitable for smaller lists where performance is important but does not require advanced features like dynamic heights.

  • react-tiny-virtual-list:

    Opt for react-tiny-virtual-list if you need a highly performant and minimalistic library that supports variable item heights. It is great for applications that require flexibility in item sizes while maintaining efficient rendering.

  • react-infinite:

    Choose react-infinite if you need a simple solution for infinite scrolling with minimal setup. It is ideal for applications where you want to load more items as the user scrolls down, without the need for complex configurations.

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