4 ms·

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