React components for efficiently rendering large lists and tabular data https://react-window.now.sh/
# Yarn yarn add react-window # NPM npm install --save react-window
Learn more at react-window.now.sh.
Frequently asked questions
react-window different from
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-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 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).
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)! 🙂
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.
We are a world class software startup focusing on building scalable, high-performance web & mobile application. We have started our journey back in 2015. And in those years we have provided support for more than 15 thousand customers over the world. We build products that create values. RedQ, Inc