React-virtualized, List is Flickkering/lagging when scrolling : <p>I am experiencing some problem when i scroll through my list.
Also notice the huge space at the bottom.
See video : <a href="https://vimeo.com/215349521" rel="noreferrer">https://vimeo.com/215349521</a></p>

<p>As far as i can see, im not making any huge mistakes.
But i do belive the problem is due to the CellMeasurer.</p>

<p>Chrome version: 58.0.3029.81</p>

<pre><code>class PromotionList extends Component {

constructor(props) {
    super(props);

    this.cache = new CellMeasurerCache({
        defaultHeight: 100,
        fixedWidth: true,
    });

    this.rowRenderer = this.rowRenderer.bind(this);
}

componentWillMount() {
    this.props.fetchPromotionsIfNeeded();
}

rowRenderer({ index, parent }) {
    const { promotions } = this.props;
    const data = promotions.list[index];

    return (
      &lt;CellMeasurer
        cache={this.cache}
        columnIndex={0}
        key={uuid.v1()}
        parent={parent}
        rowIndex={index}
      &gt;
        &lt;BlobItem
          key={uuid.v1()}
          type={BlobTypes.promotion}
          data={data}
          onClick={this.props.onItemClick}
          index={index}
        /&gt;
      &lt;/CellMeasurer&gt;
    );
}


render() {
    const { promotions, previewSize } = this.props;

    return (
      &lt;List
        height={300}
        width={previewSize.width}
        rowCount={promotions.list.length}
        deferredMeasurementCache={this.cache}
        rowHeight={this.cache.rowHeight}
        rowRenderer={this.rowRenderer}
        className="blobList"
      /&gt;
    );
}
}
</code></pre>
