MultiGrid doesn't re-render when data changed

When using MultiGrid with non-zero fixedColumnCount, the content of the fixed column doesn’t get updated when needed. For example, when using with ArrowKeyStepper it doesn’t display focused cell. At the same time, the cell gets focused in the “main” grid.

Reproducible case

https://codesandbox.io/s/jp1rlqop9y

[groganmatt12]

how would you do this for a functional component using hooks, or is this not possible with react pure components? i’ve made a virtualized Grid with hooks and functional components but it won’t re-render with state change.

[rhinoceraptor]

I think there is a better way than manually using forceUpdateGrids.

What is happening here is cell rendering control is being deferred to MultiGrid. MultiGrid and Grid are both PureComponents, so they will only update when their props change value/reference.

The component consuming MultiGrid probably has other props that its cells should update for, but MultiGrid doesn’t necessarily know that, it only updates when the props it has change.

One easy fix is to just spread the props from the component consuming MultiGrid. It’s definitely confusing, because MultiGrid will be passed props that it doesn’t need. But since the cell rendering control is being deferred, we have to ensure that MultiGrid will actually update when we want it to.

For example:

class MyGridComponent extends PureComponent {
  cellRenderer = ({ key, rowIndex, columnIndex }) => (
    <div key={key} className={this.props.className}>
      {`${rowIndex}, ${columnIndex}`}
    </div>
  )

  render = () => (
    <MultiGrid
      cellRenderer={this.cellRenderer}
      {/** ...other MultiGrid props... */}
  )
}

In this example, let’s say the props.className changed for MyGridComponent. The expected behavior is that each cell will get a new className. But className is not passed to MultiGrid, so it will not update (because it’s a PureComponent) and it won’t re-render the cells.

If we change render to pass the props, then the cells will be updated as expected:

  render = () => (
    <MultiGrid
      {...this.props /** Force MultiGrid to update when MyGridComponent updates */}
      cellRenderer={this.cellRenderer}
      {...other MultiGrid props...}
  )