Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

[00:00] The default behavior of React-Virtualized is to require a row height in pixels. However, this can be inflexible if the row that you're rendering is of a dynamic height. In order to solve for this, React-Virtualized ships with CellMeasurer and CellMeasurerCache. These allow for dynamic just-in-time measurements of your rows.

[00:19] The first thing we need to do is set up a cache. Say const cache is equal to a new CellMeasurerCache, which receives an object. We will set fixed width to true, because it is a fixed width across the screen. We'll just set a default height of 50.

[00:37] Now, we'll need to adjust our list to receive a deferred measurement cache, as well as fixing the row height. We'll pass in deferred measurement cache, will just be our cache. Then instead of our row height, we'll say cache.rowHeight.

[00:54] Inside of our index.js, we are generating a list of data that we're passing in as a data prop. However, we are also generating a random height. This will be used to mimic the random height within each particular cell.

[01:11] Now, we'll need to adjust our render row to return a row that is wrapped with a CellMeasurer. This will allow us to do the just-in-time measurement. We'll say CellMeasurer, and wrap this. We'll then move our key from our div to the outside CellMeasurer.

[01:30] We'll also need to supply a few other pieces of information, including our cache, our parent, and because this is a list, our column index is just going to be zero. Then we also need to supply the row index, which will just be the index that we pass in.

[01:53] Finally, we'll need to add our dynamic height that we're generating. Say div style is equal to height, and we'll put our template, and say this.props.data, index.random height pixels. We'll close off our div.

[02:11] Now, if we go to our browser, we can see that there is dynamic heights being applied to each of the particular rows. You can see here we have a height of 93 and a height of 48. As we scroll, everything is updated and calculated correctly.

[02:28] If you're going to make this a reusable component, this cache should only be used for this particular instance. We would need to add a constructor. Paste our cache there, and then say this.cache is equal to cache.

[02:46] Then all places that we reference our cache, we would replace this.cache, this.cache, and this.cache set row height. This is just going to mean to apply to this particular cache to this particular instance of our component.