title: React-virtualized, List is Flickkering/lagging when scrolling
body: <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>