Confused about zooming with virtualization

Hi, I have react-virtualized grid working with some initial data and it is properly virtualizing and only rendering the items that are on screen.

However, when I attempt to zoom in and change the size of the items, it appears that I did zoom in because the size of the inner scroll container has increased appropriately.

But I notice that for some reason all items in the grid are now being generated. All the offscreen items have been rendered as well.

I am using CellMeasurerCache and I call this.cache.clearAll() this.grid.recomputeGridSize({columnIndex: 0, rowIndex: 0})

on zoom. I expect to have the cache clear all the widths of the items, and then the grid should recompute grid size from the start position by generating the items with CellMeasurer, but items that are currently offscreen to the right to be generated until I scroll right.

My guess is that I have something setup with CellMeasurer wrong

_renderCell = ({rowIndex, columnIndex, key, parent, style}) => {
return (
   <CellMeasurer
        key={key}
        cache={this.cache}
        parent={parent}
        rowIndex={0}
        columnIndex={columnIndex}
        >
        {({registerChild}) => (
          <div
            style={{
              ...style,
              height: 'auto',
              whiteSpace: 'nowrap'
            }}
          >
            <MyComponent />
          </div>
        )}
      </CellMeasurer>)
 }

The setup for the grid is rather simple


<AutoSizer>
      {({height, width}) => {
          if (height === 0 || width === 0) {
            return null
          }
          return (
           <StyledGrid
              innerRef={this._setGridRef}
              deferredMeasurementCache={this.cache}
              cellRenderer={this._renderCommandWrapper}
              columnCount={groups.length}
              columnWidth={this.cache.columnWidth}
              rowCount={1}
              rowHeight={CommandsRowHeightPixel}
              height={height}
              width={width}
              />)
         }}
    </AutoSizer>

bvaughn / react-virtualized

Confused about zooming with virtualization #1807