How to use callback with useState hook in react

Question

I am using functional component with hooks  I need to update state in parent from a child  I am using a prop function in Parent   All works fine except my prop function is getting the previous state and not the current state  My prop function gets executed before useState hook setting current state  How can I can I wait for my call back function to be executed after useState call  I am looking for something like setState state callback  from class based components   Here is the code snippet   function Parent       const  Name  setName    useState        getChildChange   getChildChange bind this     function getChildChange value        setName value          return  lt div gt   Name         lt Child getChildChange  getChildChange   gt  lt  Child gt     lt  div gt     function Child props      const  Name  setName    useState        handleChange   handleChange bind this      function handleChange ele        setName ele target value       props getChildChange collectState            function collectState         return Name         return   lt div gt       lt input onChange  handleChange  value  Name  gt  lt  input gt     lt  div gt

User · Answer

With React16 x  if you want to invoke a callback function on state change using useState hook  you can use the useEffect hook attached to the state change   import React    useEffect   from  react    useEffect      gt      props getChildChange name      using camelCase for variable name is recommended      name       this will call getChildChange when ever name changes

User · Answer

we can write customise function which will call the callBack function if any changes in the state   import React    useState  useEffect   from  react   import ReactDOM from  react-dom    import    styles css    const useStateCallbackWrapper    initilValue  callBack    gt      const  state  setState    useState initilValue     useEffect      gt  callBack state    state      return  state  setState       const callBack   state   gt      console log  ---------------   state      function App       const  count  setCount    useStateCallbackWrapper 0  callBack     return        lt div className  App  gt         lt h1 gt  count  lt  h1 gt         lt button onClick       gt  setCount count   1   gt   lt  button gt         lt h2 gt Start editing to see some magic happen  lt  h2 gt       lt  div gt          const rootElement   document getElementById  root    ReactDOM render  lt App   gt   rootElement

User · Answer

You can use useEffect useLayoutEffect to achieve this   const SomeComponent        gt      const  count  setCount    React useState 0     React useEffect      gt        if  count  gt  1          document title    Threshold of over 1 reached          else         document title    No threshold reached                count       return        lt div gt         lt p gt  count  lt  p gt          lt button type  button  onClick       gt  setCount count   1   gt          Increase        lt  button gt       lt  div gt            More about it over here   If you are looking for an out of the box solution  check out this custom hook that works like useState but accepts as second parameter a callback function      npm install use-state-with-callback  import useStateWithCallback from  use-state-with-callback    const SomeOtherComponent        gt      const  count  setCount    useStateWithCallback 0  count   gt        if  count  gt  1          document title    Threshold of over 1 reached          else         document title    No threshold reached                   return        lt div gt         lt p gt  count  lt  p gt          lt button type  button  onClick       gt  setCount count   1   gt          Increase        lt  button gt       lt  div gt

User · Answer

Actually  you should avoid using this when using react hooks  It causes side effects  That s why react team create react hooks    If you remove codes that tries to bind this  you can just simply pass setName of Parent to Child and call it in handleChange  Cleaner code   function Parent       const  Name  setName    useState         return  lt div gt   Name         lt Child setName  setName   gt  lt  Child gt     lt  div gt     function Child props      const  Name  setName    useState         function handleChange ele        setName ele target value       props setName ele target value          return   lt div gt       lt input onChange  handleChange  value  Name  gt  lt  input gt     lt  div gt         Moreover  you don t have to create two copies of Name one in Parent and the other one in Child   Stick to  Single Source of Truth  principle  Child doesn t have to own the state Name but receive it from Parent  Cleanerer node   function Parent       const  Name  setName    useState         return  lt div gt   Name         lt Child setName  setName  Name  Name  gt  lt  Child gt     lt  div gt     function Child props          function handleChange ele        props setName ele target value          return   lt div gt       lt input onChange  handleChange  value  props Name  gt  lt  input gt     lt  div gt

User · Answer

you can utilize useCallback hook to do this   function Parent       const  name  setName    useState        const getChildChange   useCallback   updatedName    gt        setName updatedName                return  lt div gt   name         lt Child getChildChange  getChildChange   gt  lt  Child gt     lt  div gt     function Child props      const  name  setName    useState         function handleChange ele        setName ele target value       props getChildChange ele target value          function collectState         return name         return   lt div gt       lt input onChange  handleChange  value  name  gt  lt  input gt     lt  div gt

User · Answer

setState updater  callback  for useState Following implementation comes really close to the original setState callback from classes  Additions made to Robin s solution   Callback execution is omitted on initial render  we want to call it only on state updates  Callback can be dynamic for each setState invocation  like with classes  Usage const App        gt      const  state  setState    useStateCallback 0      same API as useState   setState with cb    const handleClick        gt        setState        prev   gt  prev   1           2nd argument is callback    s  is  updated  state       s   gt  console log  quot I am called after setState  state  quot   s                 return  lt button onClick  handleClick  gt Increment lt  button gt      useStateCallback function useStateCallback initialState      const  state  setState    useState initialState     const cbRef   useRef null      mutable ref to store current callback    const setStateCallback   useCallback  state  cb    gt        cbRef current   cb     store passed callback to ref     setState state                useEffect      gt           cb current is  null  on initial render  so we only execute cb on state  updates      if  cbRef current          cbRef current state         cbRef current   null     reset callback after execution             state       return  state  setStateCallback      Further info  React Hooks FAQ  Is there something like instance variables  Working example  x000D   x000D  const App        gt      const  state  setState    useStateCallback 0      const handleClick        gt      setState        prev   gt  prev   1           important  use  s   not the stale old closure value  state        s   gt  console log  I am called after setState  state    s            return        lt div gt         lt p gt Hello Comp  State   state   lt  p gt         lt button onClick  handleClick  gt Click me lt  button gt       lt  div gt          function useStateCallback initialState      const  state  setState    useState initialState     const cbRef   useRef null      const setStateCallback   useCallback  state  cb    gt        cbRef current   cb       setState state                useEffect      gt        if  cbRef current          cbRef current state         cbRef current   null              state       return  state  setStateCallback      ReactDOM render  lt App   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 13 0 umd react production min js  integrity  sha256-32Gmw5rBDXyMjg 73FgpukoTZdMrxuYW7tj8adbN8z4   crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 13 0 umd react-dom production min js  integrity  sha256-bjQ42ac3EN0GqK40pC9gGi YixvKyZ24qMP 9HiGW7w   crossorigin  anonymous  gt  lt  script gt   lt script gt var   useReducer  useEffect  useState  useRef  useCallback     React lt  script gt   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D  function Parent     x000D    const  Name  setName    useState      x000D    getChildChange   getChildChange bind this   x000D    function getChildChange value    x000D      setName value   x000D      x000D   x000D    return  lt div gt   Name    x000D       lt Child getChildChange  getChildChange   gt  lt  Child gt  x000D     lt  div gt  x000D    x000D   x000D  function Child props    x000D    const  Name  setName    useState      x000D    handleChange   handleChange bind this   x000D    collectState   collectState bind this   x000D     x000D    function handleChange ele    x000D      setName ele target value   x000D      x000D   x000D    function collectState     x000D      return Name  x000D      x000D     x000D     useEffect      gt    x000D      props getChildChange collectState     x000D         x000D   x000D    return   lt div gt  x000D       lt input onChange  handleChange  value  Name  gt  lt  input gt  x000D     lt  div gt    x000D     x000D   x000D   x000D    useEffect act as componentDidMount  componentDidUpdate  so after updating state it will work

User · Answer

Another way to achieve this    x000D   x000D  const  Name  setName    useState  val     callback  null    x000D  React useEffect     gt   x000D    console log Name  x000D    const  callback    Name  x000D    callback  amp  amp  callback    x000D      Name    x000D  setName  val  foo   callback      gt setName  val   then bar      x000D   x000D   x000D

User · Answer

You can use like below -  this setState      gt      subChartType1  value            gt  this props dispatch setChartData null

[reactjs] How to use callback with useState hook in react

Examples related to reactjs

Examples related to react-hooks