javascript - Is componentDidMount of parent called after all componentDidMount of children?

Question

I have the code below in my render of parent

<div>           
{
    this.state.OSMData.map(function(item, index) {
        return <Chart key={index} feature={item} ref="charts" />
    })
}
</div>

And code below in my child Chart

<div className="all-charts">
    <ChartistGraph data={chartData} type="Line" options={options} />
</div>

I thought the componentDidMount of parent is called only after all childs are loaded. But here the componentDidMount of parent is called before the componentDidMount of child.

Is this how things work? Or am I doing something wrong.

If this is how things work, how would I detect when all the child components are loaded from parent?

Answer 1

UPDATE

This answer is for React 15. the current version is 17+ so this is potentially irrelevant.

ORIGINAL

Yes the componentDidMount of children are called before the parent.

Run the code below!

documentation states:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components.

This is because at time of rendering, you should be able to reference any internal/child nodes, attempting to access parent nodes is not accepted.

Run the code below. It shows the console output.

var ChildThing = React.createClass({
  componentDidMount: function(){console.log('child mount')},
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var Parent = React.createClass({
  componentDidMount: function(){console.log('parent')},
  render: function() {
    return <div>Sup, child{this.props.children}</div>;
  }
});

var App = React.createClass({
  componentDidMount: function(){console.log('app')},
  render: function() {
    return (
      <div>
        <Parent>
          <ChildThing name="World" />
        </Parent>
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>