Order of componentDidMount in React components hierarchy

Question

I have an React application that has the following structure:

component A is composed of B and C

When the component B calls it's componentDidMount method, is this true that all component finished mounting?

Or in other words does React fire componentDidMount after all components in the tree were mounted?

or e.g. Components B componentDidMount is called when component A mounted?

Answer 1

According to the documentation, the order of the lifecycle methods on first mount is as follows:

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

Let's say you have this component:

class A extends Component {
  render() {
    return (
      <div>
        <B />
        <C />
      </div>
    )
  }
}

When A is mounted, it will fire componentDidMount(). That will happen after render. Since B and C do not exist before A's render() is called, the completion of A's mounting requires that B and C finish their respective lifecycles. A's componentDidMount() will fire after B and C are mounted. A's componentWillMount() fires before A's render(), and therefore it also fires before B or C are mounted

UPDATE

As of React 16.3, componentWillMount starts the deprecation process, along with componentWillUpdate and componentWillReceiveProps. The above example will work fine in any 16.x release of react, but it will get deprecation warnings. There are new methods that take place of the deprecated ones, with their own lifecycle. More about them in the component API docs. Here is a cheatsheet diagram for the new lifecycles