React-virtualized, List is Flickkering/lagging when scrolling

react-virtualized, reactjs

Solution

Found the solution after reading through the documentation. Just needed to add the style in the "rowRender" method:

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

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

Problem

I am experiencing some problem when i scroll through my list. Also notice the huge space at the bottom. See video : https://vimeo.com/215349521 As far as i can see, im not making any huge mistakes. But i do belive the problem is due to the CellMeasurer. Chrome version: 58.0.3029.81 ``` 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 ( <CellMeasurer cache={this.cache} columnIndex={0} key={uuid.v1()} parent={parent} rowIndex={index} > <BlobItem key={uuid.v1()} type={BlobTypes.promotion} data={data} onClick={this.props.onItemClick} index={index} /> </CellMeasurer> ); } render() { const { promotions, previewSize } = this.props; return ( <List height={300} width={previewSize.width} rowCount={promotions.list.length} deferredMeasurementCache={this.cache} rowHeight={this.cache.rowHeight} rowRenderer={this.rowRenderer} className="blobList" /> ); } } ```

Original source