title: using state from a context provider within my useEffect dependency array causes an infinite loop
body: <p>I am using the <code>shopify-buy</code> SDK, which allows me to retrieve the current cart of the user. I am trying to store that cart in my <code>CartProvider</code> which is then used in my <code>Cart</code> component. The problem is when I retrieve information from the cart it's acting a little slow so my component needs to be updated when the state changes, currently I have the following in my <code>getShopifyCart</code> function which is located in my <code>CartProvider</code>.</p>
  <pre><code>const [cartItems, setCartItems] = useState([])
  
  const getShopifyCart = () =&gt; {
      return client.checkout
        .fetch(currentVendor.cartId)
        .then((res) =&gt; {
          const lineItemsData = res.lineItems.map((item) =&gt; {
            return {
              title: item.title,
              quantity: item.quantity,
            }
          })
          setCartItems(lineItemsData)
          setLoading(false)
        })
        .catch((err) =&gt; console.log(err))
    }
  </code></pre>
  <p>In my <code>Cart</code> component I have the following <code>useEffect</code>.</p>
  <pre><code>useEffect(() =&gt; {
      getShopifyCart()
    }, [cartItems])
  </code></pre>
  <p>But this causes an infinite loop, even though the <code>cartItems</code> state isn't changing.</p>