title: Converting componentDidMount into useEffect
body: <p>I am trying to learn React hooks, and trying to convert existing codebase to use hooks, but I am confused.
  Is it normal to set state inside <code>useEffect</code>? Would I be causing the dreaded infinite loop if I do so?</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import App from 'next/app';
  import Layout from './../components/Layout';
  
  function MyApp({ Component, pageProps }) {
      const [ cart, setCart ] = useState([]);
  
      const addToCart = (product) =&gt; {
          setCart((prevCartState) =&gt; {
              return [ ...prevCartState, product ];
          });
          localStorage.setItem('cart', JSON.stringify(cart));
      };
  
      //mimicking componentDidMount to run some effect using useEffect
      //useEffect(() =&gt; setCount((currentCount) =&gt; currentCount + 1), []);
      useEffect(() =&gt; {
          const cartCache = JSON.parse(localStorage.getItem('cart'));
          //cart = cartCache; Good or bad?
          cartCache || setCart(() =&gt;{
  
          });        
      }, []);
      return &lt;Component {...pageProps} /&gt;;
  }
  </code></pre>
  <p>My original class based component:</p>
  <pre><code>/*
  export default class MyApp extends App {
    state = {
      cart: []
    }
    componentDidMount = () =&gt; {
      const cart = JSON.parse(localStorage.getItem('cart'));
      if (cart) {
        this.setState({
          cart
        });
      }
    };
    addToCart = (product) =&gt; {
      this.setState({
        cart: [...this.state.cart, product]
      });
      localStorage.setItem('cart', JSON.stringify(this.state.cart));
    }
    render() {
      const { Component, pageProps } = this.props
      return (
        &lt;contextCart.Provider value={{ cart: this.state.cart, addToCart: this.addToCart }}&gt;
          &lt;Layout&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/Layout&gt;
        &lt;/contextCart.Provider&gt;
      )
    }
  }*/
  </code></pre>