title: Using the same data dependently in the same useEffect
body: <p>I need to fetch my data in two different ways and render it according to this. At the first load, I need to fetch all the items one by one and increment the count. After that, I need to fetch all the data at once and update the display. So, I wrote something like this (not the actual code but almost the same thing):</p>
  
  <pre><code>import React, { useEffect } from "react";
  import axios from "axios";
  import { useGlobalState } from "./state";
  
  const arr = Array.from(Array(100), (x, i) =&gt; i + 1);
  
  function App() {
    const [{ posts }, dispatch] = useGlobalState();
  
    useEffect(() =&gt; {
      const getInc = () =&gt; {
        arr.forEach(async id =&gt; {
          const res = await axios(
            `https://jsonplaceholder.typicode.com/posts/${id}`
          );
          dispatch({
            type: "INC",
            payload: res.data
          });
        });
      };
  
      const getAll = async () =&gt; {
        const promises = arr.map(id =&gt;
          axios(`https://jsonplaceholder.typicode.com/posts/${id}`)
        );
        const res = await Promise.all(promises);
        dispatch({
          type: "ALL",
          payload: res.map(el =&gt; el.data)
        });
      };
  
      if (!posts.length) {
        getInc();
      } else {
        getAll();
      }
    }, [dispatch]);
  
    return (
      &lt;&gt;
        &lt;div&gt;{posts.length}&lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>I'm simply using <code>Context</code> and <code>useReducer</code> to create a simple store. The above code works as it is but I skip adding <code>posts.length</code> dependency and this makes me think that my logic is wrong.</p>
  
  <p>I tried to use refs to keep track the initialization state but I need to track the data at every route change. Then, I tried to keep it by adding an <code>init</code> state to my store but I couldn't make it work without problems. For example, I can't find a suitable place to dispatch the <code>init</code>. If I try it after a single fetch it triggers the initialization immediately and my other function (<code>getAll</code>) is invoked.</p>
  
  <p>If anyone wants to play with it here is a working sandbox: <a href="https://codesandbox.io/s/great-monad-402lb" rel="nofollow noreferrer">https://codesandbox.io/s/great-monad-402lb</a></p>