title: When does the useEffect's callback's return statement execute?
body: <p>I'd like to clarify my understanding of what's happening here. Any detail to improve my current understanding'd be appreciated.</p>
  <pre class="lang-js prettyprint-override"><code>function Timer() {
  
      let [time, setTime] = useState(5);
  
      useEffect(() =&gt; {
          let timer = setInterval(() =&gt; {
            setTime(time - 1);
          }, 1000)
          return () =&gt; clearInterval(timer);
      }, );
  
      return &lt;div&gt;{time}&lt;/div&gt;
  }
  
  export default Timer
  </code></pre>
  <p><a href="https://codesandbox.io/s/cranky-chaplygin-g1r0p" rel="noreferrer">https://codesandbox.io/s/cranky-chaplygin-g1r0p</a></p>
  <ol>
  <li><code>time</code> is being initialised to <code>5</code>.</li>
  <li><code>useEffect</code> is read. Its callback must be made ready to fire later.</li>
  <li>The <code>div</code> is rendered.</li>
  <li><code>useEffect</code>'s callback is executed. <code>setInterval</code>'s callback gets ready to fire. Surely <code>useEffect</code>'s <code>return</code> statement doesn't fire here, because if it did it would cancel the timer (and the timer does work).</li>
  <li>After, roughly, 1 second, <code>setInterval</code>'s callback fires changing the state of <code>time</code> (to 4).</li>
  <li>Now that a piece of state has changed, the function is re-executed. <code>time</code>, a new variable, is initialised to the new time state.</li>
  <li>A new <code>useEffect</code> is read, it's callback made ready to fire later. (This happens because there is no 2nd argument of <code>useEffect()</code>).</li>
  <li>The component function's <code>return</code> statement is executed. This effectively re-renders the <code>div</code>.</li>
  <li>At some point, the previous <code>useEffect</code>'s <code>return</code> statement executes (which disables the <code>timer</code> in that previous <code>useEffect</code>). I'm not sure when this occurs.</li>
  <li>The 'new' <code>useEffect</code>'s callback is executed.</li>
  </ol>