title: Why is my state not updating inside useEffect?
body: <p>I am trying to learn react hooks by making a small counter program, I am encountering the following issue.</p>
  
  <p>In the below component I am passing counter and increment as props with default value 0 and 1 respectively. I want to set a timer when the component mounts which will update counter every second as counter = counter+increment. the increment state changes from parent component every 5 second.</p>
  
  <pre><code>import React from "react";
  import { useEffect, useState } from "react";
  
  export default function AppHook(props) {
    let [counter, setCounter] = useState(props.counter);
    let [increment, setincrement] = useState(props.increment);
  
    useEffect(() =&gt; {
      setincrement(props.increment);
    }, [props.increment]);
  
    // run only once.
    // here my increment value is always 1 even if the upper hook updates
    // it whenever parent changes it. Why is this happening?
    useEffect(() =&gt; {
      console.log("component did mount");
      setInterval(() =&gt; {
        setCounter(counter =&gt; counter + increment);
      }, 1000);
    }, []);
  
    return &lt;div className="AppHook" /&gt;;
  }
  </code></pre>