React-virtualized: MultiGrid doesn't re-render when data changed

[okonet]

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

[MarkBarbieri]

see this issue https://github.com/bvaughn/react-virtualized/issues/1044

[wuweiweiwu]

@okonet do you mind clarifying how you are navigating the multigrid?

It seemed to work for me when using arrow keys in the main grid

[okonet]

Navigation works but the state isn’t displayed on any grid besides the main one.

[wuweiweiwu]

Hm Ill have to double check. But I don't think we focus cells that are not in the main grid.

[okonet]

Focus is just one corner case here. The grid won’t be updated (besides the main area) if data has changed as well. My example is just an illustration of the issue not a concrete issue with keyboard or focus.

[okonet]

I'm not sure why you decided to add enhancement and question labels where it seems to be a bug. There are attempts to fix it like @MarkBarbieri mentioned. It seems to me that the rendering is over-optimized to only re-render when scroll position / positioning has changed and doesn't take data changes into account (it seems): https://github.com/bvaughn/react-virtualized/blob/master/source/MultiGrid/MultiGrid.js#L419 (I might be wrong about this)

[wuweiweiwu]

oh my bad. I didn't read the title of the issue and misunderstood the question.

We don't rerender on content change because in order to check if the content changed, we would have to call every cellRenderer etc. That is why we expose the forceUpdateGrids methods. In order for your grid to have to updated data, you'd have to call the instance forceUpdateGrids function

[okonet]

That's how I work around it now, but it feel like it belongs to the MultiGrid implementation since there is an assumption it should work the same as a single grid.

When a single grid is used, and data change occur, it will re-render correctly. So I'm missing the bit why it's not being re-rendered for multiple grid.

[wuweiweiwu]

We also don't do content checks for Grid. If it is rerendering then its probably due to the parent component rerendering and also rerendering the Grid by chance since by default react will rerender on state or prop change.

Hope that helps!

[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...}
  )

[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.