react-virtualized: Grid's `shallowCompare` causes update issues for FlexTable

Hey Brian,

I’m having issues with the FlexTable. It never updates the content of my cells when their data changes, resulting in stale content. I’ve created a stripped down example illustrating the problem here: https://plnkr.co/edit/FXAmSypCcNRvJcoCu3SW?p=preview

I’ve tracked down the problem.

FlexTable renders the Grid component
The Grid component has a shallowCompare for shouldComponentUpdate
As a result, the Grid never re-renders and never calls the cellRenderers for its cells when the FlexTable is updated

The FlexTable component re-renders correctly, but the inner Grid doesn’t.

The issue goes away if I remove the shouldComponentUpdate on the Grid. But obviously, this is not a good solution. Doing a forceUpdate on the FlexTable doesn’t help either. The only way I’ve found to resolve this, is to call this.refs.table.refs.Grid.forceUpdate(); on every state change of my component. This feels awful too.

Can you please advise?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

This behaviour feels… wrong to me somehow. It’s hard for me to know when I need to call forceUpdateGrid since the component that renders the FlexTable isn’t always the same component that manages the changes to its data. Each cell might have it’s own components that it’s rendering, each requiring different data.

I understand why it’s needed for performance reasons, but for a table where data may be often changing in the cells, it feel very clunky to have to call forceUpdateGrid after every setState change the wrapper component may have to handle. It doesn’t feel very “React-like”.

I would almost prefer having FlexTable always re-render and have the components inside my cells have their own shouldComponentUpdate to control/limit/optimize that rendering.

EvHaus on Jun 21, 2016

So I just released 7.11.2. The only change in this version was that I pass-thru all of FlexTable props to the inner Grid. This means that if a prop changes and triggers FlexTable to re-render, it will always also re-render the inner Grid. This doesn’t seem to have harmed performance any (from my initial testing) and does hopefully make the component more intuitive and user-friendly to work with.

bvaughn on Jun 24, 2016

Both FlexTable and VirtualScroll are built on top of Grid. They’re both HOCs that decorate a Grid. In the case of VirtualScroll it does little more than set some default properties on the “decorated” Grid but in the case of FlexTable - it’s rendering some surrounding UI (eg table headers).

Sounds like you’re describing a scenario where FlexTable properties change but the underlying Grid properties do not. That’s understandably a bit confusing. Hm.

Maybe the solution here is to pass through FlexTable properties to Grid (even though it’s not using them) so that changes in the outer component’s properties will trigger a re-rendering of the inner component. I think I’d be willing to do that since I don’t expect it would harm performance too much.

bvaughn on Jun 23, 2016

Understandable…but I’m wary to enable the poorer-performing solution by default.

bvaughn on Jun 21, 2016