When exactly is `componentDidMount` fired?

by

Inside a react component tree, componentDidMount() is fired after all children components have also been mounted. This means, that any component’s componentDidMount() is fired before its parent has been mounted.

So if you want to measure DOM position and sizes etc, using componentDidMount() of a child component is an unsafe place/ time to do this.

In your case: to get accurate reading from 100% width/height components, a safe place to take such measurements would be inside the componentDidMount() of the top react component.
100% is a width/height relative to the parent/ container. So measurements can only be taken after the parent has been mounted too.

More Related Contents:

  1. My React Component is rendering twice because of Strict Mode
  2. React – Display loading screen while DOM is rendering?
  3. React vs ReactDOM?
  4. How to fix missing dependency warning when using useEffect React Hook
  5. Dynamically import images from a directory using webpack
  6. How to pass params with history.push/Link/Redirect in react-router v4?
  7. How to get history on react-router v4?
  8. How to pass params into link using React router v6?
  9. Detect Route Change with react-router
  10. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  11. Typescript image import
  12. Passing props to MUI styles
  13. Dynamic attribute in ReactJS
  14. Use Connect or pass data as props to children
  15. How to sync props to state using React hooks : setState()
  16. deploying create-react-app to heroku with express backend returns invalid host header in browser
  17. react.js application showing 404 not found in nginx server
  18. Requires Babel “7.0.0-0” but was loaded with “6.26.3”
  19. Blank page after running build on create-react-app
  20. React Router Dom v6 shows active for index as well as other subroutes
  21. What’s the difference between useCallback and useMemo in practice?
  22. Get cookie with react
  23. How to dynamically import non-React client side libraries in Next.js?
  24. Callback when DOM is loaded in react.js
  25. React native change listening port
  26. How do you change a style of a child when hovering over a parent using MUI styles?
  27. How do I type this ‘as’ JSX attribute in TypeScript?
  28. this.setState is undefined
  29. React stateless component this.refs..value?
  30. How to add custom Material UI palette colors

Leave a Comment