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?

_The `componentDidMount()` method of child components is invoked before that of parent components_: **[Link](https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount)**. — Tahir Ahmed, Sep 28 '15 at 02:40
But when i console.log in both parent and child componentDidMount(). Text form parents console.log is printed first — Aakash Sigdel, Sep 28 '15 at 02:53
It is giving correct result in the fiddle. May be it is because i am fetching data async in in componentDidMount of parent and using the array returned from the call to loop over the child OSMData is returned by the ajax call. — Aakash Sigdel, Sep 28 '15 at 05:19
yeah, so basically you used parent's `componentDidMount()` to do some manipulations (AJAX or whatever) _before_ loading the child components. If your child components were already laid out in parent with no dependancy on external data, then child's `componentDidMount()` will be called before parent's. — Tahir Ahmed, Sep 28 '15 at 07:10
I am facing the same problem. Async Data Loading breaks my componentDidMount() cycle because a placeholder is showed first. I guess there is no way to work around. Maybe restructure my components... — larrydahooster, Apr 28 '16 at 20:01
Can you add the code you're using in `componentDidMount`, or otherwise can you answer this question yourself and mark it as finished? — Guilherme Rodrigues, May 27 '16 at 08:09

Blair Anderson · Accepted Answer · 2021-08-26T21:53:54.997

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>

Could you provide the link that says `The componentDidMount() method of child components is invoked before that of parent components`, I couldn't find it in react site. — O.O, Jun 06 '17 at 09:13
This doesn't seem to appear in the docs anymore, since the only official docs ive see on `componentDidMount` are here: https://facebook.github.io/react/docs/react-component.html#componentdidmount — Chris W., Jun 30 '17 at 18:01
correct it was in the older version of docs https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount — Blair Anderson, Jul 01 '17 at 23:02
I think this answer is still relevant, though not stated in the official docs. Source: my testing, [this issue](https://github.com/facebook/create-react-app/issues/6880#issuecomment-486640921), and [this answer](https://stackoverflow.com/a/58353012/5959593). — Minh Nghĩa, Feb 18 '22 at 03:08

Is componentDidMount of parent called after all componentDidMount of children?

1 Answers1

Linked