Is componentDidMount of parent called after all componentDidMount of children?

by

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>

More Related Contents:

  1. What do multiple arrow functions mean in JavaScript?
  2. Show or hide element in React
  3. How to set focus on an input field after rendering?
  4. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  5. react router v6 navigate outside of components
  6. Correct use of arrow functions in React
  7. React Native: require() with Dynamic String?
  8. Reactjs setState() with a dynamic key name?
  9. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  10. How can I update state.item[1] in state using setState?
  11. React react-router-dom pass props to component
  12. What’s the difference between `useRef` and `createRef`?
  13. Active link with React-Router?
  14. How can I render repeating React elements?
  15. How to hide navbar in login page in react router
  16. Cleaner/shorter way to update nested state in Redux?
  17. How to make Puppeteer work with a ReactJS application on the client-side
  18. How to bind onclick handlers to `this` properly on React
  19. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  20. React-router: How to manually invoke Link?
  21. ReactJS: [Home] is not a component. All component children of must be a or
  22. ReactJs: Prevent multiple times button press
  23. Using JQuery plugins that transform the DOM in React Components?
  24. How to detect a React component vs. a React element?
  25. Why can’t React Hooks be called inside loops or nested function?
  26. React – How to open PDF file as a href target blank
  27. Measuring text width/height without rendering
  28. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  29. TypeError dispatcher.useState is not a function when using React Hooks
  30. React props: Should I pass the object or its properties? Does it make much difference?

Leave a Comment