title: Handling multiple useEffect hooks
body: <p>I am calling useEffect hook multiple times in a component</p>
  <pre><code>useEffect(() =&gt; {
    getData(id);
  }, [getData, id]);
  
  const reqBody = useMemo(
    () =&gt; ({
      item: data?.item,
    }), [data?.item]
  );
  
  useEffect(() =&gt; {
    if (data?.item) {
      getAnotherData(reqBody);
    }
  }, [getAnotherData]);
  
  </code></pre>
  <p>As seen in the code snippet, the first useEffect hook calls a function called <code>getData</code> which stores the data in redux store and the reqBody of the function <code>getAnotherData</code> in the second hook depends on the first hook.
  Therefore, the second hook runs even if the <code>data</code> in the store is not updated yet resulting in multiple api calls.
  How can I avoid this so that the function <code>getAnotherData</code> is called only when the <code>data</code> in the store is updated?</p>