Order of componentDidMount in React components hierarchy
According to the documentation, the order of the lifecycle methods on first mount is as follows:
- constructor()
- componentWillMount()
- render()
- 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