The function given to useEffect will be fired after a successful _commit_ (aka React actually manipulates the DOM after a render).

Here's a helpful diagram that shows the difference between render and commit phases in terms of the class lifecycle methods: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram...

So when a render executes useEffect with a callback (and values in its dependency array has changed), it will schedule the callback to be run once React has committed the DOM changes based on the current render.

And to add on to the other commenter, there's also a `useLayoutEffect` hook which fires synchronously after a react render but before the browser paints the render.

Basically `useLayoutEffect` fires in the same phase as `componentDidUpdate`, but it's discouraged unless you really need that timing (to do things like read the DOM directly and/or trigger a re-render before paint)

https://reactjs.org/docs/hooks-reference.html#uselayouteffec...