When exactly is `componentDidMount` fired?

user_36047 0
Viewed 34586

This is a recurring problem I have with React. The componentDidMount method is guaranteed to be fired when the component is rendered for the first time so it seems like a natural place to take DOM measurements like heights and offsets. However, many times I receive wrong style readings at this point of the component's lifecycle. The component is in the DOM, when I break with the debugger, but it's not yet painted on the screen. I get this problem with elements that have width/height set to 100% mostly. When I take measurements in componentDidUpdate - everything works fine, but this method will not fire at the initial render of the component.

So my question is - when exactly is componentDidMount fired because it's obviously not fired after all the browser paints are done.

EDIT: This Stackoverflow issue deals with the same subject:

It also references this github conversation that explains what happens

react-dom reactjs
5 Answers

It is called only once when the component mounted. That’s the perfect time to do an asynchronous request to fetch data from an API. The fetched data would get stored in the internal component state to display it in the render() lifecycle method.

Simple: It Run After Render Functions

user_104228060
Related