title: How to get useEffect to not re-render infinitely
body: <p>I am trying to render this CardsContainerCopy component after making an AJAX call with Redux-thunk.</p>
  <p>If I leave the dependencies array in useEffect empty, the  component doesn't render at all.</p>
  <p>If I add <code>cartItems</code> to the dependencies array, the  components will render but the <code>fetchItems</code> function keeps being called infinitely.</p>
  <p>Code:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import SingleCard from &quot;./SingleCard&quot;;
  import { createServer } from &quot;miragejs&quot;;
  import axios from &quot;axios&quot;;
  import itemsData from &quot;../../config/ItemsData&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { selectCartItems } from &quot;./shopSlice&quot;;
  
  let server = createServer();
  server.get(&quot;/api/food&quot;, itemsData);
  
  const fetchItems = async (dispatch) =&gt; {
    const itemsData = await axios.get(&quot;/api/food&quot;);
    dispatch({ type: &quot;shop/fetchedItems&quot;, payload: itemsData.data });
  };
  
  const CardsContainerCopy = () =&gt; {
    const [items, setItems] = useState([]);
  
    const dispatch = useDispatch();
    const cartItems = useSelector(selectCartItems);
  
    useEffect(() =&gt; {
      dispatch(fetchItems);
      setItems(cartItems);
    }, [cartItems]);
  
    return (
      &lt;&gt;
        {items?.map((item, i) =&gt; {
          return &lt;SingleCard props={item} key={i} /&gt;;
        })}
      &lt;/&gt;
    );
  };
  
  export default CardsContainerCopy;
  </code></pre>