React Virtualization - react-window vs react-virtuoso
Tags: react, virtualization, webdev, frontenddev
Published: 2021-08-26 08:50:25

Multiple libraries are available for implementing virtualization in React. `react-window` is the widely used library but recently I used `react-virtuoso` in a project. Today I'll compare `react-window`, `react-virtualized`, and `react-virtuoso` based on my experience.

###Virtualization
Firstly, I'll briefly explain virtualization/windowing. Suppose you have a large set of data that you render on the UI. 
- Thousands of items will be rendered on the DOM, even though only a few will be visible on the viewport. Moreover, the items/components, virtual DOM, and real DOM live in memory. Hence, this will cost you both performance and memory.
- Inspecting a DOM with thousands of nodes will cost you peace of mind. :)

The efficient approach will be to create and render only those items that are visible on viewport. This is where virtualization comes in. It is *the technique of creating a window in which components mount/unmount depending upon their visibility on viewport, as the user scrolls.*

###1- `react-virtualized`
[react-virtualized](https://github.com/bvaughn/react-virtualized) is the elder and bulkier brother (same author) of `react-window`. It contains more components, features, and has a much larger package size compared to the lighter react-window. The package comes with 2D components, features like infinite scroll, autosizer, etc.

One must analyze one's project requirements to determine whether they need to use the bulky react-virtualized for the features it provides or react-window will suffice. Since I didn't need so much functionality in my virtualized lists, I initially opted for `react-window`.

*Package size: 27.4 KB*

###2- `react-window`
As the author has [mentioned](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized), react-window is a complete rewrite of react-virtualized and the focus was to make the package smaller and faster. react-window is light-weight and comes with basic List and Grid components. It does lack some features, for example:
- Infinite scroll i.e. lazy loading is not supported. But you can use `react-window-infinite-loader` package with it to achieve the result. [Code Sandbox Demo](https://codesandbox.io/s/5wqo7z2np4)
- Autosizer can be implemented using `react-virtualized-auto-sizer` package. Autosizer automatically adjusts the width and height of list item, letting it fill the available space without providing explicit dimensions. [Code Sandbox Demo](https://codesandbox.io/s/3vnx878jk5)

In order to render items with variable sizes in react-window, you'll need to write a bunch of code, which is a hassle. The issue is that the item is not rendered yet, so you can't really go to the DOM to get the actual height/width. Hence for dimension calculation, you'd need to temporarily render item in a way that is not visible to the user. See [this](https://codesandbox.io/s/react-chat-simulator-yg114?file=/src/ChatRoom/Room/Messages/Messages.js) Code Sandbox example.

Considering you have implemented variable size lists, what if you now have a use case in which the item size can grow after render. There is no such support in react-window and the item content will overflow.

*Package size: 6.2 KB*

###3- `react-virtuoso`
[react-virtuoso](https://github.com/petyosi/react-virtuoso) is a relatively new package for virtualization, published first two years ago. It comes with all the necessary features and support that one might eventually require in a developing project.
- No need to configure item size, optional prop.
- Available features like infinite scroll, sticky headers, pinned items, window resize observer, autosizer, etc. (See [docs](https://github.com/petyosi/react-virtuoso))
- You don't need to handle anything regarding changing item size.

Since I needed to render items with textarea that could expand in size, I couldn't continue using react-window. Implementation using react-virtuoso was super easy. Here is a demo example:

{% codesandbox react-virtuoso-increasing-size-items-esdng %}

*Package size: 15.7 KB*

###Conclusion
Based on my experience, I'll compile the comparison as follows:
1- **Package Type**: Both `react-virtualized` and `react-window` are JavaScript packages, with type declaration packages available. `react-virtuoso` is a TypeScript package.
2- **Package Size**: `react-window` is the smallest package amongst the three, but `react-virtuoso` has a good size considering the features it provides.
3- **Features**: `react-virtuoso` comes with all the necessary features that you can possibly require in a developing project. But in `react-window`, you'll have to add packages to gain the functionalities.
4- **Coding/Configuration**: You have to write more code in `react-window`, providing itemSize, style, etc. `react-virtuoso` requires a very few props and has a simpler configuration.
5- **Documentation**: I find the documentation of `react-virtuoso` the best. It is well-structured and detailed. Proper example code is provided, compared to `react-window` where comments tell you to implement calculation on your own.

In conclusion, I will say that you should first analyze your project requirements and then decide which package fits best. Personally, I use `react-virtuoso` in my projects and I recommend others to try the package to see its advantages.