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.