title: React Hooks - useReducer: Wait for reducer to finish before triggering a function
body: <p>I have the component using <code>useReducer</code> Hooks:</p>
  
  <pre><code>const init = {
    statA: true,
    statB: true
  };
  
  const reducer = (state, action) =&gt; {
    switch (action.type) {
      case "ActionA":
        return { ...state, statA: !state.statA };
      case "ActionB":
        return { ...state, statB: !state.statB };
      default:
        return state;
    }
  };
  
  const App = () =&gt; {
    const [state, dispatch] = useReducer(reducer, init);
  
    const clickMe = () =&gt; {
      dispatch({ type: "ActionA" });
      dispatch({ type: "ActionB" });
      console.log(state);
    }
  
    return(
        &lt;button onClick={() =&gt; clickMe()}&gt;Click Me&lt;/button&gt;
    );
  };
  </code></pre>
  
  <p>When the button is clicked, the state will be changed. But when I view the log, it prints the previous state, not the current updated state.</p>
  
  <pre><code>//On the first click
  //Expected
  { statA: false, statB: false }
  //Reality
  { statA: true, statB: true }
  
  //On the second click
  //Expected
  { statA: true, statB: true }
  //Reality
  { statA: false, statB: false }
  </code></pre>
  
  <p>I know that with <code>setState</code>, I can use callback to work with updated state. But with <code>useReducer</code>, I don't know how to work with the updated state. Is there any way to solve my problem? </p>