React-virtualized, List is Flickkering/lagging when scrolling

Question

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"
      />
    );
}
}

Hmm. That flickering looks a bit like a browser bug at a glance. Maybe similar to the one shown in this comment? https://github.com/bvaughn/react-virtualized/issues/453#issuecomment-288687484 — bvaughn, Apr 30 '17 at 03:43
@brianvaughn It doesnt look quiet the same, mine is bouncing all around even if I stop scrolling. But its not the CellMeasurer for shure, removed it and still the same. But i agree, it might be a browser bug, or something with the list component as suggested in the link you provided — Aleksander Aleksic, Apr 30 '17 at 18:24

score 42 · Accepted Answer · answered Apr 30 '17 at 18:53

42

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>
  );
}

answered Apr 30 '17 at 18:53

Aleksander Aleksic

919
1
9
16

4

Thank you for taking time to answer your own question! – fancy May 29 '17 at 13:00
1

magic. I think I get it based on the docs (switching static positioning to relative). if that's the reason, would you mind updating our answer / providing an explanation as to why this works? – azium Aug 21 '18 at 08:00
2

This answer worked for me as well. I simply threw an enclosing
around it:

@azium I believe that this has to work this way because I'd imagine the virtualized library is doing funky absolute positioning things to push cells around the screen. Without the styling, stuff gets all higgledy-piggledy.
– Bonkles Apr 05 '19 at 17:53

React-virtualized, List is Flickkering/lagging when scrolling

1 Answers1