title: How to get the correct state in an useEffect hook, after another useEffect hook modifies the same state?
body: <p>I have two <code>useEffect</code> hooks, which will both run on change in <code>startTime/endTime</code> state.</p>
  <pre><code>useEffect(() =&gt; {
      if (selectedProduct) {
          fetch(...)
          .then(res =&gt; res.json())
          .then(res =&gt; setMyState(res.data));
      }
  }, [selectedProduct, startTime, endTime]);
  
  useEffect(() =&gt; {
      if(selectedStep){
          console.log(myState); //this runs twice, once for the old state and once for the new state, after above useEffect's setState is complete
      }
  }, [selectedStep, startTime, endTime, myState]);
  </code></pre>
  <p>I understand from looking around that this is probably because React does some sort of batching for performance gain such that <code>setState</code> is async in nature. Also, the <code>fetch</code> call would be async too, so it will take time to set the new state.</p>
  <p>From what I have searched, I see that there is <code>a callback</code> for <code>class based</code> React components using <code>setState</code> but as I am using hooks, I am not sure what to do. I can move the second <code>useEffect</code> code in the first one, but that would require some ugly <code>if-else</code> conditions as I need to check if <code>selectedStep</code> has not changed, and then I can use the <code>res.data</code> directly.</p>
  <p>Is there a better way of doing this?</p>