title: React make an async call on data after retrieving it from the state
body: <p>I need to make an async call after I get some data from a custom hook.  My problem is that when I do it causes an infinite loop.</p>
  <pre><code>export function useFarmInfo(): {
    [chainId in ChainId]: StakingBasic[];
  } {
    return {
      [ChainId.MATIC]: Object.values(useDefaultFarmList()[ChainId.MATIC]),
      [ChainId.MUMBAI]: [],
    };
  }
  
  // hook to grab state from the state
  const lpFarms = useFarmInfo();
  const dualFarms = useDualFarmInfo();
  
  //Memoize the pairs
  const pairLists = useMemo(() =&gt; {
    const stakingPairLists = lpFarms[chainIdOrDefault].map((item) =&gt; item.pair);
    const dualPairLists = dualFarms[chainIdOrDefault].map((item) =&gt; item.pair);
    return stakingPairLists.concat(dualPairLists);
  }, [chainIdOrDefault, lpFarms, dualFarms]);
  
  //Grab the bulk data results from the web
  useEffect(() =&gt; {
    getBulkPairData(pairLists).then((data) =&gt; setBulkPairs(data));
  }, [pairLists]);
  </code></pre>
  <p>I think whats happening is that when I set the state it re-renders which causes hook to grab the farms from the state to be reset, and it creates an infinite loop.</p>
  <p>I tried to move the <code>getBulkPairData</code> into the memoized function, but that's not meant to handle promises.</p>
  <p>How do I properly make an <code>async</code> call after retrieving data from my hooks?</p>