Virtual Scrolling Libraries Comparison
react-window vs react-virtualized vs vue-virtual-scroller vs ngx-virtual-scroller
1 Year
react-windowreact-virtualizedvue-virtual-scrollerngx-virtual-scrollerSimilar Packages:
What's Virtual Scrolling Libraries?

Virtual scrolling libraries are designed to efficiently render large lists or grids of data by only displaying the items that are currently visible in the viewport. This significantly improves performance and reduces memory consumption, especially when dealing with extensive datasets. By implementing techniques like windowing or lazy loading, these libraries help developers create smooth and responsive user interfaces without overwhelming the browser's rendering capabilities. Each library is tailored to specific frameworks, making it essential to choose one that aligns with your project's technology stack.

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
vue-virtual-scroller197,0959,772406 kB236-MIT
ngx-virtual-scroller14,464979-1535 years agoMIT
Feature Comparison: react-window vs react-virtualized vs vue-virtual-scroller vs ngx-virtual-scroller

Performance Optimization

  • react-window:

    react-window is optimized for performance with a minimalistic approach. It focuses on rendering only the visible items in a list or grid, which reduces the memory footprint and improves rendering speed. Its lightweight nature makes it suitable for applications that require basic virtual scrolling without additional complexity.

  • react-virtualized:

    react-virtualized is known for its high performance, offering features like cell measurement and dynamic heights that allow for efficient rendering of complex lists and grids. It intelligently manages the rendering of items based on their visibility, ensuring that only the necessary components are mounted and updated, which enhances overall performance.

  • vue-virtual-scroller:

    vue-virtual-scroller efficiently manages the rendering of large lists by only displaying the items currently in view. It uses Vue's reactivity system to ensure that updates are handled smoothly, making it a performant choice for Vue.js applications that need to handle extensive datasets.

  • ngx-virtual-scroller:

    ngx-virtual-scroller leverages Angular's change detection strategy to minimize re-renders, ensuring that only the visible items are rendered in the DOM. This results in significant performance improvements when displaying large lists, as it reduces the number of DOM nodes and the associated rendering costs.

Ease of Use

  • react-window:

    react-window is designed with simplicity in mind, offering a minimal API that is easy to understand and implement. This makes it an excellent choice for developers who want to quickly add virtual scrolling to their React applications without the overhead of unnecessary features.

  • react-virtualized:

    react-virtualized offers a rich set of features, but its complexity can lead to a steeper learning curve. Developers may need to familiarize themselves with its various components and utilities to fully leverage its capabilities, which can be a drawback for those seeking simplicity.

  • vue-virtual-scroller:

    vue-virtual-scroller features a clean and intuitive API that aligns with Vue's design principles. It allows developers to implement virtual scrolling with minimal effort, making it accessible for those familiar with Vue.js.

  • ngx-virtual-scroller:

    ngx-virtual-scroller provides a simple API that integrates well with Angular's component architecture. Its straightforward setup allows developers to quickly implement virtual scrolling without extensive configuration, making it user-friendly for Angular developers.

Flexibility and Extensibility

  • react-window:

    react-window is less feature-rich than react-virtualized but offers enough flexibility for most common use cases. It allows for basic customization of item sizes and rendering logic, making it suitable for straightforward virtual scrolling needs.

  • react-virtualized:

    react-virtualized is highly extensible, providing a wide range of components and utilities for different scenarios, including grids and tables. This flexibility allows developers to create complex layouts and customize behavior according to their specific requirements.

  • vue-virtual-scroller:

    vue-virtual-scroller is designed to be extensible, allowing developers to customize the rendering of items and integrate additional features as necessary. Its flexibility makes it a good choice for various applications that require virtual scrolling.

  • ngx-virtual-scroller:

    ngx-virtual-scroller is flexible enough to accommodate various use cases, allowing developers to customize item heights and implement additional features as needed. However, it may not offer as many advanced options as some of its counterparts.

Framework Compatibility

  • react-window:

    react-window is also designed for React, providing a lightweight alternative to react-virtualized. It is ideal for projects that need basic virtual scrolling without the complexity of additional features, fitting well within the React framework.

  • react-virtualized:

    react-virtualized is tailored for React applications, leveraging React's component-based architecture. It is well-suited for projects that require advanced virtual scrolling capabilities within the React ecosystem.

  • vue-virtual-scroller:

    vue-virtual-scroller is built for Vue.js, ensuring compatibility with Vue's reactivity and component system. It is optimized for Vue applications, making it an excellent choice for developers working within the Vue ecosystem.

  • ngx-virtual-scroller:

    ngx-virtual-scroller is specifically built for Angular applications, ensuring seamless integration with Angular's ecosystem and best practices. It takes advantage of Angular's features, making it the go-to choice for Angular developers.

Community and Support

  • react-window:

    react-window, being a lightweight alternative, has a smaller community compared to react-virtualized, but it is still well-documented and supported. Developers can find sufficient resources to implement and troubleshoot its features.

  • react-virtualized:

    react-virtualized has a large and active community, providing ample resources, documentation, and support. This makes it easier for developers to find solutions to common issues and share best practices.

  • vue-virtual-scroller:

    vue-virtual-scroller is supported by the Vue community, which is known for its helpfulness and collaboration. While it may not have as large a user base as some other libraries, it is still well-documented and has a growing number of resources available.

  • ngx-virtual-scroller:

    ngx-virtual-scroller has a growing community and is supported by Angular developers, but it may not have as extensive resources or documentation as more established libraries. However, it benefits from the Angular community's collaborative nature.

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

    Opt for react-window if you need a lightweight solution for virtual scrolling with a simpler API. It is ideal for projects that require basic virtual scrolling capabilities without the overhead of additional features found in react-virtualized.

  • react-virtualized:

    Choose react-virtualized if your project requires advanced features like cell measurement, dynamic row heights, or complex grid layouts. It offers a comprehensive set of components and utilities for handling large datasets in React applications.

  • vue-virtual-scroller:

    Use vue-virtual-scroller if you are developing with Vue.js and need an efficient way to render large lists. It provides a simple API and is designed to work well with Vue's reactivity system, making it easy to integrate into Vue applications.

  • ngx-virtual-scroller:

    Select ngx-virtual-scroller if you are using Angular and need a straightforward solution for virtual scrolling in lists or grids. It integrates seamlessly with Angular's change detection and is optimized for performance in Angular applications.

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