Unexpected interleaving of subtree/parent lifecycle methods

[vsiao]

Repro: https://jsfiddle.net/5t5ua47c/
In the example, a click handler in the subtree queues an update for both the the subtree and parent components, with the following ordering of lifecycle methods:

parent will update
> child will update
>> subtree will update
> child did update
parent did update
>> subtree did update

If the parent component unmounts the subtree in componentDidUpdate this will cause the subtree to be unmounted by the time that its componentDidUpdate method is called (https://jsfiddle.net/v5fk4xvx/1/):

parent will update
> child will update
>> subtree will update
> child did update
parent did update (unmount subtree)
>> subtree will unmount
>> subtree did update

What is the expected behavior?

Probably this:

parent will update
> child will update
>> subtree will update
> child did update
>> subtree did update
parent did update

[gaearon]

This looks like a bug to me. I'm not sure it's high priority since we're concentrating on Fiber now (#6170) but it would be great if you could turn this into a failing test case.

[gaearon]

unstable_renderSubtreeIntoContainer was pretty broken in general.

Since React 16, we now offer a first-class portal API that replaces it and doesn’t suffer from the interleaving issues.