React components for efficiently rendering large lists and tabular data
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: 1. It reduces the amount of work (and time) required to render the initial view and to process updates. 2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.
The following wonderful companies have sponsored react-window:
Learn more about becoming a sponsor!
# Yarn
yarn add react-window
# NPM
npm install --save react-window
Learn more at react-window.now.sh:
react-virtualized-auto-sizer
:
HOC that grows to fit all of the available space and passes the width
and height values to its child.react-window-infinite-loader
:
Helps break large data sets down into chunks that can be just-in-time
loaded as they are scrolled into view. It can also be used to create
infinite loading lists (e.g. Facebook or Twitter).react-vtree
:
Lightweight and flexible solution to render large tree structures (e.g.,
file system).react-window
different from
react-virtualized
?I wrote 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-window
is 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).
If 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!)react-window
primitives 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.
Yes. I recommend using the react-virtualized-auto-sizer
package:
Here’s a Code Sandbox demo.
If your list looks something like this…
…then you probably forgot to use the style
parameter!
Libraries like react-window work by absolutely positioning the list
items (via an inline style), so don’t forget to attach it to the DOM
element you render!
Yes. I recommend using the react-window-infinite-loader
package:
Here’s a Code Sandbox demo.
Yes, using the outerElementType
prop.
Here’s a Code Sandbox demo.
Yes, although it requires a bit of inline styling.
Here’s a Code Sandbox demo.
Yes, although it requires a bit of inline styling.
Here’s a Code Sandbox demo.
Yes, although it requires a small amount of user code. Here’s a Code Sandbox demo.
MIT © bvaughn