useState set method not reflecting change immediately

Question

I am trying to learn hooks and the useState method has made me confused  I am assigning an initial value to a state in the form of an array  The set method in useState is not working for me even with spread      or without spread operator  I have made an API on another PC that I am calling and fetching the data which I want to set into the state  Here is my code   x000D   x000D   lt script src  https   unpkg com  babel standalone 7 babel min js  gt  lt  script gt   lt script src  https   unpkg com react 17 umd react production min js  gt  lt  script gt   lt script src  https   unpkg com react-dom 17 umd react-dom production min js  gt  lt  script gt   lt div id  root  gt  lt  div gt    lt script type  text babel  gt     import React    useState  useEffect   from  react      import ReactDOM from  react-dom   const   useState  useEffect     React     web-browser variant  const StateSelector        gt      const initialValue                 category            photo            description            id  0        name            rating  0               const  movies  setMovies    useState initialValue      useEffect      gt         async function           try              const response   await fetch  http   192 168 1 164 5000 movies display               const json   await response json               const result   json data result          const result                             category   cat1               description   desc1               id   1546514491119               name   randomname2               photo  null              rating   3                                       category   cat2               description   desc1               id   1546837819818               name   randomname1               rating   5                                 console log  result     result           setMovies result           console log  movies     movies           catch  e            console error e                                  return  lt p gt hello lt  p gt       const rootElement   document getElementById  root    ReactDOM render  lt StateSelector   gt   rootElement    lt  script gt  x000D   x000D   x000D   The setMovies result  as well as setMovies    result  is not working  Could use some help here  I expect the result variable to be pushed into the movies array

User · Accepted Answer

Much like setState in Class components created by extending React.Component or React.PureComponent, the state update using the updater provided by useState hook is also asynchronous, and will not be reflected immediately.

Also, the main issue here is not just the asynchronous nature but the fact that state values are used by functions based on their current closures, and state updates will reflect in the next re-render by which the existing closures are not affected, but new ones are created. Now in the current state, the values within hooks are obtained by existing closures, and when a re-render happens, the closures are updated based on whether the function is recreated again or not.

Even if you add a setTimeout the function, though the timeout will run after some time by which the re-render would have happened, the setTimeout will still use the value from its previous closure and not the updated one.

setMovies(result);
console.log(movies) // movies here will not be updated

If you want to perform an action on state update, you need to use the useEffect hook, much like using componentDidUpdate in class components since the setter returned by useState doesn't have a callback pattern

useEffect(() => {
    // action on update of movies
}, [movies]);

As far as the syntax to update state is concerned, setMovies(result) will replace the previous movies value in the state with those available from the async request.

However, if you want to merge the response with the previously existing values, you must use the callback syntax of state updation along with the correct use of spread syntax like

setMovies(prevMovies => ([...prevMovies, ...result]));

User · Answer

You can solve it by using the useRef hook but then it s will not re-render when it  updated  I have created a hooks called useStateRef  that give you the good from both worlds  It s like a state that when it s updated the Component re-render  and it s like a  quot ref quot  that always have the latest value  See this example  var  state setState ref  useStateRef 0   It works exactly like useState but in addition  it gives you the current state under ref current Learn more   https   www npmjs com package react-usestateref

User · Answer

I just finished a rewrite with useReducer  following  kentcdobs article  ref below  which really gave me a solid result that suffers not one bit from these closure problems    see  https   kentcdodds com blog how-to-use-react-context-effectively  I condensed his readable boilerplate to my preferred level of DRYness -- reading his sandbox implementation will show you how it actually works   Enjoy  I know I am     import React from  react      ref  https   kentcdodds com blog how-to-use-react-context-effectively  const ApplicationDispatch   React createContext   const ApplicationContext   React createContext    function stateReducer state  action      if  state hasOwnProperty action type         return      state   action type   state action type    action newValue          throw new Error  Unhandled action type    action type        const initialState       keyCode        testCode        testMode  false    phoneNumber        resultCode  null    mobileInfo        configName        appConfig          function DispatchProvider   children        const  state  dispatch    React useReducer stateReducer  initialState     return        lt ApplicationDispatch Provider value  dispatch  gt         lt ApplicationContext Provider value  state  gt           children         lt  ApplicationContext Provider gt       lt  ApplicationDispatch Provider gt         function useDispatchable stateName      const context   React useContext ApplicationContext     const dispatch   React useContext ApplicationDispatch     return  context stateName   newValue   gt  dispatch   type  stateName  newValue         function useKeyCode     return useDispatchable  keyCode      function useTestCode     return useDispatchable  testCode      function useTestMode     return useDispatchable  testMode      function usePhoneNumber     return useDispatchable  phoneNumber      function useResultCode     return useDispatchable  resultCode      function useMobileInfo     return useDispatchable  mobileInfo      function useConfigName     return useDispatchable  configName      function useAppConfig     return useDispatchable  appConfig       export     DispatchProvider    useKeyCode    useTestCode    useTestMode    usePhoneNumber    useResultCode    useMobileInfo    useConfigName    useAppConfig      with a usage similar to this   import   useHistory   from  react-router-dom       https   react-bootstrap github io components alerts import   Container  Row   from  react-bootstrap    import   useAppConfig  useKeyCode  usePhoneNumber   from        ApplicationDispatchProvider    import   ControlSet   from        components control-set   import   keypadClass   from        utils style-utils   import   MaskedEntry   from        components masked-entry   import   Messaging   from        components messaging   import   SimpleKeypad  HandleKeyPress  ALT ID   from        components simple-keypad    export const AltIdPage        gt      const history   useHistory      const  keyCode  setKeyCode    useKeyCode      const  phoneNumber  setPhoneNumber    usePhoneNumber      const  appConfig  setAppConfig    useAppConfig       const keyPressed   btn   gt        const maxLen   appConfig phoneNumberEntry entryLen      const newValue   HandleKeyPress btn  phoneNumber  slice 0  maxLen       setPhoneNumber newValue          const doSubmit        gt        history push  s           const disableBtns   phoneNumber length  lt  appConfig phoneNumberEntry entryLen     return        lt Container fluid className  text-center  gt         lt Row gt           lt Messaging       msgColors  appConfig pageColors  msgLines  appConfig entryMsgs altIdMsgs      gt         lt  Row gt         lt Row gt           lt MaskedEntry          appConfig phoneNumberEntry  entryColors  appConfig pageColors  entryLine  phoneNumber      gt         lt  Row gt         lt Row gt           lt SimpleKeypad       keyboardName  ALT ID  themeName  appConfig keyTheme  keyPressed  styleClass  keypadClass      gt         lt  Row gt         lt Row gt           lt ControlSet       btnColors  appConfig buttonColors  disabled  disableBtns  btns     text   Submit   click  doSubmit         gt         lt  Row gt       lt  Container gt           AltIdPage propTypes         Now everything persists smoothly everywhere across all my pages  Nice   Thanks Kent

User · Answer

replace return  lt p gt hello lt  p gt      with return  lt p gt  JSON stringify movies   lt  p gt     Now you should see  that your code actually does work  What does not work is the console log movies   This is because movies points to the old state  If you move your console log movies  outside of useEffect  right above the return  you will see the updated movies object

User · Answer

Additional details to the previous answer  While React s setState is asynchronous  both classes and hooks   and it s tempting to use that fact to explain the observed behavior  it is not the reason why it happens  TLDR  The reason is a closure scope around an immutable const value   Solutions   read the value in render function  not inside nested functions     useEffect      gt    setMovies result           console log movies    add the variable into dependencies  and use the react-hooks exhaustive-deps eslint rule     useEffect      gt    setMovies result           useEffect      gt    console log movies      movies     use a mutable reference  when the above is not possible     const moviesRef   useRef initialValue    useEffect      gt        moviesRef current   result     console log moviesRef current               Explanation why it happens  If async was the only reason  it would be possible to await setState    However  both props and state are assumed to be unchanging during 1 render   Treat this state as if it were immutable   With hooks  this assumption is enhanced by using constant values with the const keyword  const  state  setState    useState  initial    The value might be different between 2 renders  but remains a constant inside the render itself and inside any closures  functions that live longer even after render is finished  e g  useEffect  event handlers  inside any Promise or  setTimeout   Consider following fake  but synchronous  React-like implementation   x000D   x000D     sync implementation   let internalState let renderAgain  const setState    updateFn    gt      internalState   updateFn internalState    renderAgain      const useState    defaultState    gt      if   internalState        internalState   defaultState       return  internalState  setState     const render    component  node    gt      const  html  handleClick    component     node innerHTML   html   renderAgain        gt  render component  node    return handleClick       test   const MyComponent        gt      const  x  setX    useState 1    console log  in render    x            const handleClick        gt        setX current   gt  current   1      console log  in handler effect Promise setTimeout    x       NOT updated          return       html    lt button gt   x  lt  button gt        handleClick        const triggerClick   render MyComponent  document getElementById  root    triggerClick   triggerClick   triggerClick   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

useEffect has its own state lifecycle  it will not update until you pass a function in parameters or effect destroyed  object and array spread or rest will not work inside useEffect  React useEffect      gt        console log  quot effect quot         async      gt            try               let result   await fetch  quot  query countries quot                const res   await result json                let result1   await fetch  quot  query projects quot                const res1   await result1 json                let result11   await fetch  quot  query regions quot                const res11   await result11 json                setData                   countries  res                  projects  res1                  regions  res11                           catch           data      setData     or use this useEffect      gt         async      gt            try               await Promise all                   fetch  quot  query countries quot   then  response    gt  response json                     fetch  quot  query projects quot   then  response    gt  response json                     fetch  quot  query regions quot   then  response    gt  response json                   then   country  project  region     gt                       console log country  project  region                   setData                       countries  country                      projects  project                      regions  region                                              catch               console log  quot data fetch error quot                          setData

[javascript] useState set method not reflecting change immediately

Examples related to javascript

Examples related to reactjs

Examples related to react-hooks