title: React hook useCallback with get API call inside useEffect not behaving correctly
body: <p>I want to achieve the following.</p>
  <p>Action from <code>redux</code> is imported in this component. It fetches data from firebase, which I use as a database. Data is displayed inside this component.</p>
  <p>My problem is that data is fetched every time component is mounted, which is not an ideal scenario.</p>
  <p>I would like to prevent that behavior.</p>
  <p>Ideal scenario is that data should be fetched only first time component is rendered and no more afterwards. Of course it should also fetch when data is changed otherwise no. I used <code>useCallback</code>, but certainly there is a mistake in the code below. Token and Id are passed when user is authenticated.</p>
  <pre><code>import { fetchFavs } from &quot;../../store/actions&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  
  
  const token = useSelector((state) =&gt; state.auth.token);
    const id = useSelector((state) =&gt; state.auth.userId);
    const fetchedFavs = useSelector((state) =&gt; state.saveFavs.fetchedFavs);
  
    const dispatch = useDispatch();
  
  const fetchFavsOptimized = useCallback(() =&gt; {
      dispatch(fetchFavs(token, id));
      console.log(&quot;rendered&quot;);
    }, [token, id, dispatch]);
  
    useEffect(() =&gt; {
      if (token) {
        fetchFavsOptimized();
      }
    }, [fetchFavsOptimized, token]);
  </code></pre>