title: Error "Maximum update depth exceeded. This can happen when a component calls setState inside useEffect"
body: <p>I'm facing this error (repeats thousands of times until page crashes) whenever my Cart component (also shown below) is called:</p>
  <pre><code>index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
      in Cart (created by Context.Consumer)
      in Route (at Routes.js:24)
      in Switch (at Routes.js:23)
      in Router (created by BrowserRouter)
      in BrowserRouter (at Routes.js:22)
      in Routes (at src/index.js:5)
  </code></pre>
  <p>My Cart component:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import Layout from &quot;./Layout&quot;;
  import { getCart } from &quot;./cartHelpers&quot;;
  import Card from &quot;./Card&quot;;
  import Checkout from &quot;./Checkout&quot;;
  
  const Cart = () =&gt; {
      const [items, setItems] = useState([]);
  
      useEffect(() =&gt; {
          setItems(getCart());
      }, [items]);
  
      const showItems = items =&gt; {
          return (
              &lt;div&gt;
                  &lt;h2&gt;Your cart has {`${items.length}`} items&lt;/h2&gt;
                  &lt;hr /&gt;
                  {items.map((product, i) =&gt; (
                      &lt;Card
                          key={i}
                          product={product}
                          showAddToCartButton={false}
                          cartUpdate={true}
                          showRemoveProductButton={true}
                      /&gt;
                  ))}
              &lt;/div&gt;
          );
      };
  
      const noItemsMessage = () =&gt; (
          &lt;h2&gt;
              Your cart is empty. &lt;br /&gt; &lt;Link to=&quot;/shop&quot;&gt;Continue shopping&lt;/Link&gt;
          &lt;/h2&gt;
      );
  
      return (
          &lt;Layout
              className=&quot;container-fluid&quot;
          &gt;
              &lt;div className=&quot;row&quot;&gt;
                  &lt;div className=&quot;col-6&quot;&gt;
                      {items.length &gt; 0 ? showItems(items) : noItemsMessage()}
                  &lt;/div&gt;
  
                  &lt;div className=&quot;col-6&quot;&gt;
                      &lt;h2 className=&quot;mb-4&quot;&gt;Your cart summary&lt;/h2&gt;
                      &lt;hr /&gt;
                      &lt;Checkout products={items} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/Layout&gt;
      );
  };
  
  export default Cart;
  </code></pre>
  <p><code>useEffect</code> is calling <code>getCart()</code> (shown below):</p>
  <pre><code>export const getCart = () =&gt; {
      if (typeof window !== &quot;undefined&quot;) {
          if (localStorage.getItem(&quot;cart&quot;)) {
              return JSON.parse(localStorage.getItem(&quot;cart&quot;));
          }
      }
      return [];
  };
  </code></pre>
  <p>I intend for <code>getCart</code> to grab the cart from the <code>localStorage</code> and populate that in the state variable <code>items</code> or return an empty array <code>[]</code>.<br>
  From my understanding, useEffect changes the page whenever the state changes and when there is any item in the dependency array it will be based on that.<br>
  Well I cant figure out why this error is happening.<br>
  I really tried understanding this error <code>can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render</code> and here's what I learned so far trying to solve this:</p>
  <ol>
  <li><code>items</code>, the dependency, doesn't change much. Testing adding 1 item or 0 items results in thousands of the same error</li>
  <li>Removing useEffect stops the error entirely <em>but defeats the purpose of tying it to the <strong>items</strong> state variable</em></li>
  </ol>
  <p>How can I stop this error?</p>
  <p>I just want this component to work without freezing and throwing thousands of this error upon render.</p>