title: useEffect and watching state
body: <p>I am trying to setState of items on render using a function call and then <strong>watch the items state for changes to cause re-render if they change.</strong> Passing a reference to the object keys as per the suggested answer does not seem to change anything. I am trying to do this using the hook useEffect(). getCart() is an function to retrieve data from localStorage. Code:</p>
  
  <pre><code>const [items, setItems] = useState([]);
  
  useEffect(() =&gt; {
      setItems(getCart());
  }, [items]);
  </code></pre>
  
  <p>I am getting an error "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."</p>
  
  <p>I understand how I am causing an infinite loop by effectively changing the items state on render and then this causes a re-render and so on. How would I get around this, is this possible using useEffect? Thanks.</p>
  
  <p>Edit: Code that edits the localStorage</p>
  
  <pre><code>export const updateItem = (productId, count) =&gt; {
     let cart = [];
     if (typeof window !== 'undefined') {
          if (localStorage.getItem('cart')) {
              cart = JSON.parse(localStorage.getItem('cart'));
          }
          cart.map((product, index) =&gt; {
              if (product._id === productId) {
                  cart[index].count = count;
              }
          })
          localStorage.setItem('cart', JSON.stringify(cart));
      }
  }
  </code></pre>