Cell caching (while scrolling) is not working with WindowScroller

[olavk]

Problem: Scrolling with WindowScroller is sluggish, because all cells on screen are re-rendered on every scroll event. There is an internal caching mechanism that should work while scrolling, but not if WindowScroller is used.

defaultCellRangeRenderer checks for cell cache before rendering a cell, but only when isScrolling is true (also something about scaling?). If isScrolling == false, it will always re-render cells.
This is passed in from Grid::_calculateChildrenToRender, which reads isScrolling from Grid.state. Grid.state.isScrolling is only set true, when onScroll is called from div.ReactVirtualized__Grid.

If WindowScroller is used, Grid.state.isScrolling is always set to false.

Proposed solution: allow isScrolling to be overridden from Grid.props. That way any component which renders Grid (and they all pass ...this.props to Grid) can read isScrolling from WindowScroller, and pass that down. E.g.

<WindowScroller>
  {({height, scrollTop, isScrolling}) => (
    <Table
      autoHeight
      height={height}
      scrollTop={scrollTop}
      isScrolling={isScrolling}
      ...
    >
      {columns}
    </Table>
  )}
</WindowScroller>

Will make a pull request.

[dfdeagle47]

Good catch. I'm currently having performance issues with the WindowScroller as well.

Until the pull request is merged, a temporary solution for the List might be

import { defaultCellRangeRenderer, List } from 'react-virtualized;
//...

<WindowScroller>
  {({height, scrollTop, isScrolling}) => (
    <List
      autoHeight
      height={height}
      scrollTop={overrideScrollTop || scrollTop}
      defautCellRangeRenderer={params => defaultCellRangeRenderer({ ...params, isScrolling })}
      ...
    >
      {columns}
    </Table>
  )}
</WindowScroller>

The only thing missing from the hack is (Grid.js)

              pointerEvents: isScrolling ? 'none' : '',

[bvaughn]

Great issue write-up. Thanks for digging in and writing up a proposal.

defaultCellRangeRenderer checks for cell cache before rendering a cell, but only when isScrolling is true (also something about scaling?)

These couple of slides give a little background info on the scaling issue. Basically I'm compressing positions and adjusting offset slightly as a user scrolls- so if I were to cache style (eg cache position) in this case, cells would get misaligned slightly during scroll. It's complicated. ☹️

@dfdeagle47 is right that you can temporarily work around this by passing a decorated defaultCellRangeRenderer as the cellRangeRenderer prop. I like your proposed solution though so I don't see any reason we can't move forward with it.

[dfdeagle47]

@bvaughn: thanks for the link, that slide deck is golden.

[bvaughn]

👍

[bvaughn]

This change has been pushed via 9.5.0. Thanks for your help!

[olavk]

Thank you!

[mifozski]

Just a heads-up for anyone who's still having a problem with rows re-rendering on each scroll even after passing the isScrolling prop to List: isScrollingOptOut prop also has to be set to true for the List's caching mechanism to work properly.