Dynamic row heights with react-virtualized and new CellMeasurer

I need to update the row heights when the list data has changed. The current CellMeasurer doc doesn't seem to have any info on the new public methods.

Admittedly the docs could be improved, with regard to the new CellMeasurer. In this case though, you need to do 2 things in respond to your row data/sizes changing:

  1. If a specific list-item has changed size then you need to clear its cached size so it can be remeasured. You do this by calling clear(index) on CellMeasurerCache. (Pass the index of the row that's changed.)
  2. Next you'll need to let List know that its size information needs to be recalculated. You do this by calling recomputeRowHeights(index). (Pass the index of the row that's changed.)

For an example of something similar to what you're describing, check out the example Twitter-like app I built with react-virtualized. You can see the source here.


if (this.props.list.length !== nextProps.list.length) {
  cache.clearAll();
}

This helped me! :)