Sequence of componentWillMount calls in React.js

Question

According to this page http://busypeoples.github.io/post/react-component-lifecycle/ The render method for a component is called right in between the componentWillMount and componentDidMount methods amongst other places.

But the react.js documentation for component lifecycles here https://facebook.github.io/react/docs/component-specs.html says that the componentDidMount methods of all child activities are called before the parent. I can understand that componentDidMount is ok to call after any child components are rendered but how does the runtime know which children to call the componentWillMount function on before they are rendered? Or am I right in assuming that componentWillMount is called for the parent activity first and then for the children (unlike componentDidMount)?

Thanks!

Answer 1

OK. so here goes. If you have a simple structure with a parent and 2 children like this:

<Parent>
  <Child/>
  <Child/>
</Parent>

Then the sequence of events firing will be:

1. <Parent> componentWillMount()
2. <Parent> render(), which starts to render children
3. <Child> componentWillMount() of the first child
4. <Child> render() of the first child
5. <Child> componentWillMount() of the second child
6. <Child> render() of the second child
7. <Child> componentDidMount() of the first child (these will start only after the last render in the tree has run)
8. <Child> componentDidMount() of the second child
9. <Parent> componentDidMount() (this one will run only after its last child has run componentDidMount)

You can find a codepen example here.

Answer 2

You could put a console.log() in each of the methods to see their order printed in the console.