Breaking change in v7 - componentDidUpdate order

We are running into some difficulty updating to v7 due to what seems like a breaking change.

Context: We’re rendering react inside a larger non-react webapp, where when user does some action, some hidden forms get rendered and the form submit.

We detect if it’s time to submit by using componentDidUpdate method on a parent component - relying that child forms have re-rendered by the time componentDidUpdate has been called.

With v7 this seems to be broken - componentDidUpdate for parent is called before child render.

Repro: https://codesandbox.io/embed/eloquent-bas-b12b6

V7 order:

V6 order:

This seems like a bug to us as official docs state

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

Is the order in v7 intentional?

[macobo]

I guess we have no other choice but to try remove our dependency on this behavior going forward, though I’m really surprised by this. Thanks for the help regardless!

[markerikson]

@ckedar : no, that’s not correct, and I don’t know why you’re saying that.

connect has always behaved as a PureComponent equivalent, but with a stronger net guarantee: if the combination of const mergedProps = {...ownProps, ...stateProps, ...dispatchProps} hasn’t changed, then your own component won’t render.

The React.memo() usage in v7 is a key part of that implementation, and is necessary for acceptable performance.