title: React useState value in Context API always use initial value instead of updated value
body: <p>I'm using Context API to store global value like userId to share between components across entire application.</p>
  <p>Here's what the context.js looks like:</p>
  <pre><code>import React, { useState } from 'react';
  
  const AppContext = React.createContext({
      date: new Date(),
      userId: null,
      groupId: null,
      setAppContext: () =&gt; {},
  });
  
  export const AppContextProvider = (props) =&gt; {
      const initState = {
          date: new Date(),
          userId: null,
          groupId: null,
          setAppContext: (appContext) =&gt; {
              console.log(state); // this line always log initial state value after first update
              setState({ ...state, ...appContext });
          },
      }
      const [state, setState] = useState(initState);
      return (
          &lt;AppContext.Provider value={state}&gt;
              {props.children}
          &lt;/AppContext.Provider&gt;
      )
  }
  
  export default AppContext;
  </code></pre>
  <p>Basically I'm trying to use one big context to hold all value that I use together and access them in child components like this:</p>
  <pre><code>// access value and the setter
  const { userId, setAppContext } = useContext(AppContext);
  
  // setting value
  setAppContext({
      userId: newUserId,
  });
  </code></pre>
  <p>The problem is, &quot;state&quot; variable in the setter function doesn't seems to update and when I try to set new value like above, other values get overwrite with its initial value (e.g. userId get update but the rest return to null), which I guess I must do something wrong and I still have no idea.</p>
  <p>Any advice would be much appreciated.</p>