const [thing, setThing] = useState(true)

useEffect(() => { console.log({ thing }) }, [thing])

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.

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...