title: Unable to get updated state using React useContext and useMemo
body: <p>I want to use React's useContext and useMemo to get the updated value, but the value is returned without being updated from the initialState.</p>
  <p>Is there something wrong with the way I'm writing this?</p>
  <p>A simple codesandbox can be found below.</p>
  <p><code>./context/AppContext.js</code></p>
  <pre><code>import React, {
    createContext,
    useCallback,
    useContext,
    useMemo,
    useReducer
  } from &quot;react&quot;;
  
  export const AppContext = createContext();
  
  export const useAppContext = () =&gt; {
    return useContext(AppContext);
  };
  
  const initialState = {
    bar: null
  };
  
  const SET_APP = &quot;SET_APP&quot;;
  
  export const reducer = (state, { type, payload }) =&gt; {
    switch (type) {
      case SET_APP:
        const { bar } = payload;
        return {
          ...state,
          bar
        };
      default:
        throw Error(
          `Unexpected action type in ElectionContext reducer: '${type}'.`
        );
    }
  };
  
  const AppContextProvider = (props) =&gt; {
    const [state, dispatch] = useReducer(reducer, initialState);
  
    const appSetter = useCallback(() =&gt; {
      dispatch({ type: SET_APP, payload: { bar: &quot;bar&quot; } });
    }, []);
  
    return (
      &lt;AppContext.Provider
        value={useMemo(
          () =&gt; [
            state,
            {
              appSetter
            }
          ],
          [appSetter]
        )}
      &gt;
        {props.children}
      &lt;/AppContext.Provider&gt;
    );
  };
  
  export const useAppSetter = () =&gt; {
    const [, { appSetter }] = useAppContext();
    return appSetter;
  };
  
  export const useAppObj = () =&gt; {
    const [state] = useAppContext();
    return state;
  };
  
  export default AppContextProvider;
  </code></pre>
  <p><code>App.js</code></p>
  <pre><code>import &quot;./styles.css&quot;;
  import { useEffect } from &quot;react&quot;;
  import { useAppSetter, useAppObj } from &quot;./contexts/AppContext&quot;;
  
  export default function App() {
    const appSetter = useAppSetter();
    const { bar } = useAppObj();
  
    useEffect(() =&gt; {
      appSetter();
    });
  
    const foo = () =&gt; {
      console.log(bar);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;button onClick={foo}&gt;console&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><a href="https://codesandbox.io/embed/peaceful-cloud-rn4cs?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/peaceful-cloud-rn4cs?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>