title: Use React hook to implement a self-increment counter
body: <p>The code is here: <a href="https://codesandbox.io/s/nw4jym4n0" rel="noreferrer">https://codesandbox.io/s/nw4jym4n0</a></p>
  
  <pre><code>export default ({ name }: Props) =&gt; {
    const [counter, setCounter] = useState(0);
  
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        setCounter(counter + 1);
      }, 1000);
  
      return () =&gt; {
        clearInterval(interval);
      };
    });
  
    return &lt;h1&gt;{counter}&lt;/h1&gt;;
  };
  </code></pre>
  
  <p>The problem is each <code>setCounter</code> trigger re-rendering so the interval got reset and re-created. This might looks fine since the state(counter) keeps incrementing, however it could freeze when combining with other hooks.</p>
  
  <p>What's the correct way to do this? In class component it's simple with a instance variable holding the interval.</p>