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 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, 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-loaderpackage with it to achieve the result. Code Sandbox Demo - Autosizer can be implemented using
react-virtualized-auto-sizerpackage. Autosizer automatically adjusts the width and height of list item, letting it fill the available space without providing explicit dimensions. Code Sandbox Demo
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 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 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)
- 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:
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.
Oldest comments (4)
recently switched from react-window to react-virtuoso. have found the "scrollTo" accuracy to be much better with virtuoso, also virtuoso does a lot of stuff for you (measures row size in a variable sized list, among other things).
react-window is a very, very small and performant package though which is nice if your use case is fairly simple.
I'd be interested to hear your thoughts on react-virtual.tanstack.com/docs/ov...
Just switched from react-window to react-virtuoso after learning about it here. react-window needed a separate react-window-infinite-loader package to "load more on scroll" and did not support window scrolling. This package just solved both my problems in a one swoop.
I also looked at tanstack virtual but it needed more setup and markup to work plus they had very limited documentation.
Glad to hear that react-virtuoso was able to solve your problems!