componentDidMount fired when DOM is not mounted for portal tree components

[frenzzy]

Do you want to request a feature or report a bug?

BUG

What is the current behavior?

For all components inside react portal componentDidMount fired when DOM is not mounted yet.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

Demo: https://jsfiddle.net/Luktwrdm/40/

What is the expected behavior?

componentDidMount being fired when DOM is mounted

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Problem exist in React v16.1.1, browser or OS des not matter.
It worked fine earlier in React v15 with ReactDOM.unstable_renderSubtreeIntoContainer

[gaearon]

I don't think there is a bug in React.

In React, child's componentDidMount always fires before parents. This ensures the parent is ready and contains all children by the time it mounts (e.g. in case it needs to measure itself).

In your example App is inside of Portal. Therefore App.componentDidMount runs before Portal.componentDidMount. This is expected.

You are not seeing a number because by the time you do the measurement in App, your code in Portal has not yet added its node to the body yet. Therefore it is still in a detached tree.

To fix this, you could append this.node to the body immediately after creating it. Then you would be able to measure its child immediately when the child mounts.