# react-window > React components for efficiently rendering large lists and tabular data ### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/) --- 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. ### Sponsors The following wonderful companies have sponsored react-window:

[Learn more about becoming a sponsor!](https://opencollective.com/react-window#sponsor)

## Install ```bash # Yarn yarn add react-window # NPM npm install --save react-window ``` ## Usage Learn more at [react-window.now.sh](https://react-window.now.sh/): ## Related libraries * [`react-virtualized-auto-sizer`](https://npmjs.com/package/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`](https://npmjs.com/package/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`](https://www.npmjs.com/package/react-vtree): Lightweight and flexible solution to render large tree structures (e.g., file system). ## Frequently asked questions ### How is `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 **smaller**¹ 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: 1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!) 2. 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)! 🙂 ^{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.} ### Can a list or a grid fill 100% the width or height of a page? Yes. I recommend using the [`react-virtualized-auto-sizer` package](https://npmjs.com/package/react-virtualized-auto-sizer): screen shot 2019-03-07 at 7 29 08 pm

Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5). ### Why is my list blank when I scroll? 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! screen shot 2019-03-07 at 7 21 48 pm

### Can I lazy load data for my list? Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader): screen shot 2019-03-07 at 7 32 32 pm

Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4). ### Can I attach custom properties or event handlers? Yes, using the `outerElementType` prop. Screen Shot 2019-03-12 at 8 58 09 AM

Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0). ### Can I add padding to the top and bottom of a list? Yes, although it requires a bit of inline styling. Screen Shot 2019-06-02 at 8 38 18 PM

Here's a [Code Sandbox demo](https://codesandbox.io/s/react-window-list-padding-dg0pq). ### Can I add gutter or padding between items? Yes, although it requires a bit of inline styling. Screen Shot 2019-03-26 at 6 33 56 PM

Here's a [Code Sandbox demo](https://codesandbox.io/s/2w8wmlm89p). ### Does this library support "sticky" items? Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https://codesandbox.io/s/0mk3qwpl4l). ## License MIT © [bvaughn](https://github.com/bvaughn)