React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks. It reduces the amount of work (and time) required to render the initial view and to process updates. It reduces the memory footprint by avoiding over-allocation of DOM nodes. react-window is a complete rewrite of react-virtualized. If react-window provides the functionality your project needs, it is strongly recommend that you use it instead of react-virtualized. However if you need features that only react-virtualized provides, you have two options. Use react-virtualized. (It's still widely used by a lot of successful projects!). Or, create a component that decorates one of the react-window primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)!
Features
- Reduces the memory footprint by avoiding over-allocation of DOM nodes
- Reduces the amount of work (and time) required to render the initial view and to process updates
- You can add padding to the top and bottom of a list
- You can lazy load data for your lists
- You can attach custom properties or event handlers
- Adding a react-virtualized list to a CRA project increases the (gzipped) build size
Project Samples
Categories
LibrariesLicense
MIT LicenseFollow react-window
Shopify offers plans for anyone that wants to sell products online and build an ecommerce store, small to mid-sized businesses as well as enterprise