title: React: Redux state updated in one effect but next effect in same component is using previous value of state
body: <p>Using <em>react 16.8.2</em>, <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow noreferrer">hooks API</a>.</p>
  
  <p>Redux <strong>initial state</strong>:</p>
  
  <pre><code>const initialState = {
    name: one,
    count: 1,
  }
  </code></pre>
  
  <p><strong>Component</strong>:</p>
  
  <pre><code>function CompTwo(props) {
    useActiveCount(setActiveCount, 2); 
    useEffect(() =&gt; {
      // activeCount is still 1
      if(activeCount === 2) {
        setActiveName('two')
      }
    });
  }
  
  const mapStateToProps = state =&gt; ({
    activeCount: state.count,
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
    setActiveCount: count =&gt; dispatch(updateActiveCount(count)),
    setActiveName: name =&gt; dispatch(updateActiveName(name),
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(CompTwo);
  </code></pre>
  
  <p><strong>useActiveCount</strong>:</p>
  
  <pre><code>const useActiveCount = function (setActiveCount, count) {
    useEffect(() =&gt; {
      setActiveCount(count);
    })
  }
  </code></pre>
  
  <p>In <code>CompTwo</code>, if I set count <code>useActiveCount(setActiveCount, 2);</code> before setting active name <code>setActivePage('two')</code>, shouldn't I get the new value <code>2</code>, in <code>activeCount</code> prop?</p>
  
  <p>It does set <code>activeCount</code> to 2, when I check the state value in redux logger in dev-tool console, but in <code>useEffect</code> code of <code>CompTwo</code>, I still get older value of <code>activeCount</code> i.e <code>1</code>.</p>
  
  <p>Why is this happening?</p>