react-windowis 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 smaller and faster. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible.
react-window is newer, faster, and much lighter, but it doesn’t do everything
react-virtualized can do. Use
react-window if you can, but
react-virtualized has a lot of bells and whistles that might be pretty useful to you.
In this article, we’ll cover:
- What do these libraries do?
- What does
- What does
- Which one is best for you? 🚀
Question 1: Do you need windowing?
Both react-window and
react-virtualized are libraries for windowing.
Windowing (aka virtualizing) is a technique for improving the performance of long lists by only writing the visible portion of your list to the DOM.
Without windowing, React has to write your entire list to the DOM before one list item is visible.
So if I had around 10,000 list items, I’d have to wait for React to write at least 10,000
<div />s to the DOM before the first item in that list is visible.
As a reminder, React internally uses a “virtual DOM” to hold your UI state because the “real” DOM is slow and expensive. By windowing, you can speed up your initial render by avoiding the “real” DOM as much as possible.
Question 2: Do you really need windowing?
Though it can improve performance, windowing is not a silver bullet.
Windowing improves performance because it delays writing your entire list to the DOM, but the reality is that those items have to be written to the DOM eventually if you want the user to see them. If you don’t pay for the rendering time upfront, then you’ll have to pay for it later.
Sometimes windowing can actually decrease perceived performance because the user has to wait for each individual list item to load on scroll instead of waiting for one eager load of the entire list on mount.
In the demo above, notice how the list in the windowed version appears faster, but the non-windowed version feels faster when you’re scrolling through it.
The windowed version appears faster because it delays rendering the whole list, but it feels slower/looks janky when scrolling fast because it’s loading and unloading list items to the DOM.
Whether or not to window greatly depends on your situation and what’s important to you:
|Initial load time||⚠️ Depends on the list size||✅ (near) Instant|
|List item load time||✅ (near) Instant||⚠️ Depends on complexity of the item|
|DOM manipulation occurs||⚠️ On initial render||⚠️ On scroll|
In general, I would not recommend windowing if you don’t have to. I’ve made the mistake of windowing when it was unnecessary, and the end result was a slower list that took longer to make and was significantly more complex 😓.
react-virtualized are great libraries that make windowing as easy as can be, but they also introduce a bit of constraints on your UI.
Before you window, try making your list normally and see if your environment can handle it. If you’re having performance issues, then continue on.
Question 3: Is
react-window good enough for you?
As stated by the author of both
react-windowdoesn’t solve as many problems and doesn’t support as many use cases.
This might make you think
react-window won’t solve your problem, but that’s not necessarily the case.
react-window is a just a lighter core with a simpler philosophy.
react-window can still support many of the same use cases as
react-virtualized, but it’s your responsibility as a developer to use
react-window as a building block instead of
react-virtualized for every use case.
react-window is just a library that virtualizes lists and grids. That’s why it’s more than 15 times smaller. Quoting
react-virtualizedlist to a [create-react-app] project increases the (gzipped) build size by ~33.5 KB. Adding a
react-windowlist to a CRA project increases the (gzipped) build size by <2 KB.
Out of the box,
react-window only has four components:
This is vastly different from the 13 components
Virtualized collection types:
Helpers/decorators for the above collection types:
As a general rule of thumb, you should be able to use
react-window in place of
react-virtualized for tables, lists, and grids. However, you can’t use
react-window for anything else, including masonry layouts and any other 2-D layouts that don’t fit a grid.
Here are some demos of using
react-window to achieve the same results as
Dynamic container sizing (
Dynamic item sizing (
Note: there are some caveats to the approach in the demo above (as there are caveats to using the actual
This cell measurer has to render the contents of the item twice: once to size it, and then once inside the list. This approach also requires the node to be rendered synchronously with react-dom, so complex list items may seem to appear slower when scrolling.
Infinite loading (
Taken directly from the
Arrow key navigation (
Scroll-synced multigrids (
Question 4: Should you use
Quoting from the
react-window GitHub again:
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:
react-virtualized. (It’s still widely used by a lot of successful projects!)
- Create a component that decorates one of the
react-windowprimitives and adds the functionality you need. You may even want to release this component to npm (as its own, standalone package)! 🙂
So there’s that!
react-virtualized is still a great project, but it may do more than you need. However, I would recommend using
- You’re already using
react-virtualizedin your project/on your team. If it ain’t broke, don’t fix it — and, more importantly, don’t introduce unnecessary code changes.
- You need to virtualize a 2-D collection that is not a grid. This is the only use case that
react-windowhas no support for.
- You want a pre-built solution.
react-virtualizedhas code demos for all its use cases while
react-windowjust provides virtualized list primitives so you can build off them. If you want docs and pre-made examples with more use cases, then the heavier
react-virtualizedis for you.
react-window: newer and faster virtualized list primitives. Use
react-window as your virtualized list building block to satisfy your specific use case without bringing a lot of unnecessary code.
react-virtualized: a heavier all-in-one that solves — and provides docs/examples for — many use cases, including virtualizing collections that are not grids (e.g., masonry layouts).
react-virtualized is still a great library but probably does more than you need it to.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.