title: Updating state with fetch then using state in useEffect doesn't work
body: <p>I have a component in React where in <code>useEffect</code> I make two API calls and set two states. After still in <code>useEffect</code> I am trying to set another state with one of the states updated by the API. If I do this by keeping the square brackets parameter of <code>useEffect</code> empty it won't set the state. If I pass the state constants in the brackets it goes into an infinite loop.</p>
  
  <pre><code>async function fetchData() {
      const agentRes = await fetch("http://localhost:3004/agentsdata");
          agentRes
              .json()
              .then(res =&gt; setAgents(res))
              .catch(err =&gt; console.log(err));
  
      const queueRes = await fetch("http://localhost:3004/queuedata");
          queueRes
              .json()
              .then(res =&gt; setBaseQueues(res))
              .catch(err =&gt; console.log(err));
      }
  
  useEffect(() =&gt; {
  
      fetchData();
  
      let pge;
  
      if (props.location.data !== undefined) {
          pge = props.location.data.page;
      }
      else {pge = 1;}
  
      setUser(props.match.params.user);
      setPage(pge);
  
  
      let lowerB = (0 +((pge - 1) * 10));
      let upperB = 10 + ((pge - 1) * 10);
  
      setQueues(baseQueues.slice(lowerB, upperB)); // here the state is not getting set.
  }, [queues])
  </code></pre>
  
  <p>How do I make it so I can set that state as well as I need to do it in <code>useEffect</code>.</p>