title: How to chain React Context dispatch? (Hooks)
body: <p>What I want to do is sort of subscribe to a dispatch, then dispatch to another state. I've tried useEffect but it's giving me infinite loop and a few googling says to not update state on useEffect so now my code looks like this, but it's not working as intended. </p>
  
  <pre><code>const Chain = () =&gt; {
    const [fooState, fooDispatch] = fooOne() // useReducer
    const [barState, barDispatch] = barTwo() // useReducer
  
    const btnOnClick = () =&gt; {
      fooDispatch({ type: "UPDATE_FOO" })
  
      // Update barState base on the new value of foo, doesn't work. 
      // Foo is not yet updated.
      if (fooState.value == 'new value') {
        barDispatch({ type: "UPDATE_BAR" }) 
      }
      // fooState gets updated after this function block.
    }
  
    return &lt;Button label="Button" onClick={btnOnClick} /&gt;
  }
  
  export default Chain
  </code></pre>
  
  <p>My useReducer code looks like this:
  <a href="https://kentcdodds.com/blog/how-to-use-react-context-effectively" rel="nofollow noreferrer">https://kentcdodds.com/blog/how-to-use-react-context-effectively</a></p>
  
  <p>On line <code>if (fooState.value == 'new value') {</code>, React still haven't updated the value so I can't go inside the if block. </p>