title: How exactly does useEffect's return work? Why is the code preforming like it does?
body: <p>I'm practicing react hooks and I'm creating a very simple stopwatch app. Currently, my code is doing exactly what I want it to do but I do not understand why it works. When I hit start, the setTimeouts run and constantly update the time state. When I hit stop, it clears the timeout. Why does it clear the timeout when I do not explicitly tell it to. Also, based on the react docs, the return in useEffect will only run when the component unmounts. However, I threw console.logs inside and saw that it runs the returned callback every time useEffect is called. Finally, I removed the returned callback and saw that it doesn't actually clear the timeout when I hit stop. Can someone help me dissect this?</p>
  
  <pre><code>import React, {useState, useEffect} from 'react';
  
  function Stopwatch(){
  
    const [time, setTime] = useState(0);
    const [start, setStart] = useState(false);
  
    useEffect(() =&gt; {
      let timeout;
      if (start) {
        timeout = setTimeout(() =&gt; {setTime(currTime =&gt; currTime + 1);}, 1000);
      }
  
      return () =&gt; {
        clearTimeout(timeout);
      }
    });
  
    return(
      &lt;&gt;
        &lt;div&gt;{time}&lt;/div&gt;
        &lt;button onClick={() =&gt; setStart(currStart =&gt; !currStart)}&gt;{start ? "Stop" : "Start"}&lt;/button&gt;
      &lt;/&gt;
    )
  }
  
  export default Stopwatch
  </code></pre>