Dynamic row heights with react-virtualized and new CellMeasurer

Question

I'm using react-virualized 9 with Autosizer, List, and CellMeasurer components. I need to update the row heights when the list data has changed. It appears that since the changes to support React Fiber in version 9 the only public method for CellMeasurer is now measure(). Most of the examples use the previous resetMeasurementForRow() method. The current CellMeasurer doc doesn't seem to have any info on the new public methods. Not sure if I've overlooked something but any help is appreciated.

const cache = new CellMeasurerCache({
  defaultHeight: 60,
  fixedWidth: true
});

<AutoSizer>
  {({ width, height }) => (
    <List
      deferredMeasurementCache={cache}
      height={height}
      ref={element => { this.list = element; }}
      rowCount={list.length}
      rowHeight={cache.rowHeight}
      rowRenderer={this.rowRenderer}
      width={width}
    />
  )}
</AutoSizer>

rowRenderer({ index, key, parent, style }) {
  return (
    <CellMeasurer
      cache={cache}
      columnIndex={0}
      key={key}
      overscanRowCount={10}
      parent={parent}
      ref={element => { this.cellMeasurer = element; }}
      rowIndex={index}
    >
      {({ measure }) => {
        this.measure = measure.bind(this);

        return <MyList index={index} data={list[index]} style={style} />;
      }}
    </CellMeasurer>
  );
}

componentWillReceiveProps(nextProps) {
  // Some change in data occurred, I'll probably use Immutable.js here
  if (this.props.list.length !== nextProps.list.length) {
    this.measure();
    this.list.recomputeRowHeights();
  }
}

Answer 1

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 .

Answer 2

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

This helped me! :)