Infinite Scroll and Virtual Scrolling Libraries Comparison
react-window vs react-virtualized vs react-infinite-scroll-component vs ngx-infinite-scroll vs vue-virtual-scroller vs ngx-virtual-scroller
1 Year
react-windowreact-virtualizedreact-infinite-scroll-componentngx-infinite-scrollvue-virtual-scrollerngx-virtual-scrollerSimilar Packages:
What's Infinite Scroll and Virtual Scrolling Libraries?

These libraries provide solutions for implementing infinite scrolling and virtual scrolling in web applications, enhancing the user experience by efficiently loading and displaying large datasets without overwhelming the browser. Infinite scrolling allows users to continuously load more content as they scroll down, while virtual scrolling optimizes rendering by only displaying the items currently in view, significantly improving performance and responsiveness in applications with extensive lists or grids.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-window1,958,43115,997896 kB4a year agoMIT
react-virtualized929,37326,4442.2 MB42 years agoMIT
react-infinite-scroll-component698,5812,890-1934 years agoMIT
ngx-infinite-scroll298,9171,24777.2 kB97 days agoMIT
vue-virtual-scroller197,0959,772406 kB236-MIT
ngx-virtual-scroller14,464979-1535 years agoMIT
Feature Comparison: react-window vs react-virtualized vs react-infinite-scroll-component vs ngx-infinite-scroll vs vue-virtual-scroller vs ngx-virtual-scroller

Integration

  • react-window:

    Lightweight and easy to integrate into any React application, focusing on performance with minimal configuration required.

  • react-virtualized:

    Provides a rich set of components designed for complex use cases, integrating well with existing React applications and offering extensive customization options.

  • react-infinite-scroll-component:

    Offers a simple API that works well with both class and functional components, making it versatile for different React project structures.

  • ngx-infinite-scroll:

    Seamlessly integrates with Angular's lifecycle and change detection, making it easy to implement and manage within Angular applications.

  • vue-virtual-scroller:

    Built for Vue.js, it integrates well with Vue's reactivity system, allowing developers to implement virtual scrolling effortlessly.

  • ngx-virtual-scroller:

    Designed specifically for Angular, it leverages Angular's features to provide a smooth integration experience for developers.

Performance Optimization

  • react-window:

    Focuses on rendering only the visible portion of lists, leading to improved performance in applications with extensive data sets.

  • react-virtualized:

    Highly optimized for performance, it minimizes re-renders and efficiently manages large datasets with features like windowing and dynamic row heights.

  • react-infinite-scroll-component:

    Uses a threshold to determine when to load more items, ensuring that the application remains responsive even with large datasets.

  • ngx-infinite-scroll:

    Optimizes loading of additional content only when the user scrolls near the bottom of the page, reducing unnecessary data fetching and improving performance.

  • vue-virtual-scroller:

    Efficiently renders only the visible items in a list, reducing memory usage and improving the overall performance of Vue applications.

  • ngx-virtual-scroller:

    Efficiently manages rendering by only displaying items in the viewport, significantly reducing the number of DOM nodes and improving rendering speed.

Ease of Use

  • react-window:

    Offers a simple API that is easy to learn, making it suitable for developers looking for a quick solution to virtual scrolling.

  • react-virtualized:

    While powerful, it has a steeper learning curve due to its extensive features, requiring more time to master.

  • react-infinite-scroll-component:

    Designed for ease of use, it requires minimal setup and provides clear documentation for quick implementation.

  • ngx-infinite-scroll:

    Simple to set up with minimal configuration, making it accessible for developers new to Angular or infinite scrolling.

  • vue-virtual-scroller:

    User-friendly with a clear API, allowing Vue developers to implement virtual scrolling without a steep learning curve.

  • ngx-virtual-scroller:

    Provides a straightforward API that is easy to understand, allowing developers to implement virtual scrolling quickly.

Customizability

  • react-window:

    Offers basic customization for item rendering, focusing on simplicity while still allowing for some degree of flexibility.

  • react-virtualized:

    Extensive customization options for rendering components, row heights, and more, catering to complex application needs.

  • react-infinite-scroll-component:

    Provides props for customizing loading behavior and thresholds, allowing for tailored user experiences.

  • ngx-infinite-scroll:

    Allows customization of loading indicators and thresholds, giving developers flexibility in how infinite scrolling behaves.

  • vue-virtual-scroller:

    Customizable item rendering and sizes, making it adaptable for various use cases in Vue applications.

  • ngx-virtual-scroller:

    Highly customizable, enabling developers to define item sizes and customize rendering behavior for different use cases.

Community and Support

  • react-window:

    Backed by the same community as react-virtualized, it benefits from shared knowledge and resources, ensuring good support.

  • react-virtualized:

    A mature library with extensive documentation and a strong community, offering numerous resources for troubleshooting and implementation.

  • react-infinite-scroll-component:

    Well-documented with a robust community, making it easy to find solutions and examples for common issues.

  • ngx-infinite-scroll:

    Supported by a growing community of Angular developers, with documentation and examples available for assistance.

  • vue-virtual-scroller:

    Supported by the Vue community, with documentation and examples readily available for developers.

  • ngx-virtual-scroller:

    Has a dedicated user base within the Angular community, providing resources and support for developers.

How to Choose: react-window vs react-virtualized vs react-infinite-scroll-component vs ngx-infinite-scroll vs vue-virtual-scroller vs ngx-virtual-scroller
  • react-window:

    Select react-window for a lightweight alternative to react-virtualized, ideal for simple use cases where you need efficient rendering of large lists with minimal overhead and a straightforward API.

  • react-virtualized:

    Choose react-virtualized for complex React applications that require a comprehensive set of features for rendering large lists and tables, including support for fixed headers, variable row heights, and dynamic loading.

  • react-infinite-scroll-component:

    Opt for react-infinite-scroll-component if you are using React and want an easy-to-implement infinite scrolling solution that supports both functional and class components with customizable loading indicators.

  • ngx-infinite-scroll:

    Choose ngx-infinite-scroll if you are working with Angular and need a straightforward solution for infinite scrolling that integrates seamlessly with Angular's change detection and lifecycle hooks.

  • vue-virtual-scroller:

    Use vue-virtual-scroller if you are developing with Vue.js and need a performant solution for rendering long lists or grids, providing a simple API to manage virtual scrolling.

  • ngx-virtual-scroller:

    Select ngx-virtual-scroller for Angular applications where you need to efficiently render large lists or grids by only displaying items in the viewport, reducing memory usage and improving performance.

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