List doesn't update display or row heights when data updated.

Setup I have this List that uses CellMeasurer to compute row heights dynamically.

<WindowScroller ref={ref => (this.windowScroller = ref)}>
  {({ height, isScrolling, onChildScroll, scrollTop }) => (
    <AutoSizer disableHeight={true}>
      {({ width }) => (
        <div>
          <List
            autoHeight={true}
            height={height}
            isScrolling={isScrolling}
            onScroll={onChildScroll}
            scrollTop={scrollTop}
            rowCount={contacts.length}
            rowHeight={this._cache.rowHeight}
            rowRenderer={this._rowRenderer}
            width={width}
            deferredMeasurementCache={this._cache}
            overscanRowCount={0}
          />
        </div>
      )}
    </AutoSizer>
  )}
</WindowScroller>

Problem The list doesn’t update either display or row heights when data has changed. For the list to change, I have to scroll the window manually. I’ve tried to clear the cache, updatePosition and forceRender but still has no effect.

Temporary Solution Since scrolling to update isn’t acceptable, I created a hack in the componentDidUpdate to be able to update the list when data changes.

/**
   * Since virtual list doesn't update till it scrolls, programmatically scroll window to
   * trigger update.
   */
  public componentDidUpdate(prevProps: Props) {
    const becameVisible = this.props.isVisible && !prevProps.isVisible;
    const contactChanged = this.props.contacts !== prevProps.contacts;

    if (this.windowScroller && (becameVisible || contactChanged)) {
      this._cache.clearAll();
      this.windowScroller!.updatePosition();

      window.scrollTo(window.scrollX, window.scrollY + 5);
      window.scrollTo(window.scrollX, window.scrollY - 5);
    }
  }

[goldylucks]

for me this didn’t work, so I dynamically set an “artificial” key on the List, and I bump it by 1 to programmatically force a rerender

class MyComponent extends React.Component {
  this.listKey = 0

  componentDidUpdate() { this.listKey += 1 }
  ...

  render() {
    <List key={this.listKey} some more props here />
  }
}

[superman66]

You can add ref

       <List
           ref={this.bindListRef}
            autoHeight={true}
            height={height}
            isScrolling={isScrolling}
            onScroll={onChildScroll}
            scrollTop={scrollTop}
            rowCount={contacts.length}
            rowHeight={this._cache.rowHeight}
            rowRenderer={this._rowRenderer}
            width={width}
            deferredMeasurementCache={this._cache}
            overscanRowCount={0}
          />

the bindListRef function

  bindListRef = ref => {
    this.list = ref;
  };

At last, call forceUpdateGrid in ComponentDidUpdate

  componentDidUpdate() {
    if (this.list) {
      this.list.forceUpdateGrid();
    }
  }