[istoica]

Is there a way to trigger something after state changes ? In the class based components, setState has a second argument that gets triggered after state has updated.

This is nowhere to be found in the hooks approach, without using flags and other strange constructs.

Where is it gone ?

[sombremesa]

You can use useEffect for this. If you only care about certain state/props, put them in the second argument in an array.

[gherkinnn]

Use useEffect.

const [thing, setThing] = useState(true)

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

[rpastuszak]

Not that it matters too much given the question asked, but am I right to think that the useEffect callback would get fired on the next render (function call) here?

[lilactown]

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.

[Klathmon]

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