Question

19

Is componentDidMount of parent called after all componentDidMount of children?

rated 0 times [ 20] [ 1] / answers: 1 / hits: 30992 / 9 Years ago, mon, september 28, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 9 Years ago arthur · Accepted Answer

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>