4 ms·

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 upda

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 ?

deleted 7y ago
[deleted]
sombremesa 7y ago
You can use useEffect for this. If you only care about certain state/props, put them in the second argument in an array.
gherkinnn 7y ago
Use useEffect. const [thing, setThing] = useState(true) useEffect(() => { console.log({ thing }) }, [thing])
- rpastuszak 7y ago
  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 7y ago
    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/ 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 7y ago
    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#uselayouteffect https://reactjs.org/docs/hooks-reference.html#uselayouteffec...
deleted 7y ago
[deleted]

deleted 7y ago

[deleted]

sombremesa 7y ago

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

gherkinnn 7y ago

Use useEffect. const [thing, setThing] = useState(true) useEffect(() => { console.log({ thing }) }, [thing])

rpastuszak 7y ago
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 7y ago
  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/ 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 7y ago
  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#uselayouteffect https://reactjs.org/docs/hooks-reference.html#uselayouteffec...

deleted 7y ago

[deleted]