Reactjs.org: didMount/didUpdate exact hook call moment clarification

[grundmanise]

Isn't this part:

The componentDidMount() hook runs after the component output has been rendered to the DOM.

from here, wrong as per this reply. componentDidUpdate is called after internal react's reconciliations are finished, but not really when the output is yielded to the browser and rendered on the screen.

[gaearon]

They're called after React calls the DOM APIs like appendChild. This means that, if the parent was already in the document, you can measure the newly mounted child, and the browser will give you its size. Then if you call setState inside them to make an adjustment (e.g. to position a tooltip), you can do this before the browser paints anything.

Other than that, there’s nothing special that React waits for.

[gaearon]

Maybe "after React has performed DOM operations" would be more accurate, feel free to send a PR.

"Rendered to the DOM" is a big ambiguous but in that documentation section by "rendered" we mean "had its render method called, and had its DOM updated accordingly". Not a browser paint per se.

[grundmanise]

Thanks for elaborating on this, I'll try to find some time and come up with a diagram, to better illustrate this moment in the docs.

Sorry for spamming issues instead of SO, but does it mean that if we have a long-running task >10-16ms in CDU/CDM then we will miss a frame(s)?

[gaearon]

Yes, it's best to avoid doing too much work in component lifecycles because they block rendering.

You can do something like

componentDidMount() {
  requestIdleCallback(() => { /* do something */ });
}

to do non-urgent work although browsers aren't very consistent in how it works at the moment.

[gaearon]

We also plan to publish a library that allows to schedule non-urgent work reliably. So keep an eye on next releases.