title: How does React useState and useCallback hook work when useCallback lacks dependencies
body: <p>I am studying react-hook recently. I have encountered a problem which makes me unable to understand in the process of practice. </p>
  
  <pre><code>import React, { useState, useCallback } from 'react';
  const set = new Set();
  
  function Demo() {
    const [count, setCount] = useState(0);
  
    const changeValue = useCallback(() =&gt; {
      setCount(count + 1);
    }, []); 
  
    set.add(count);
    console.log('size: ', set.size);
  
    return(
      &lt;div&gt;
        &lt;p&gt;Hello React Hook&lt;/p&gt;
        &lt;p&gt;{count}&lt;/p&gt;
        &lt;button onClick={changeValue}&gt;count++&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
  export default Demo;
  
  // If you click the button multiple times, the output is:
  // size: 1
  // size: 2
  // size: 2
  </code></pre>
  
  <p>I wrote a timer using react-hook. As I expected, the count value shown is always 1, because I didn't use count as a dependency of useCallback.</p>
  
  <p>But what I can't understand is <code>console.log('size: ', set.size)</code> only printed three times, why? Every time I click the <code>count++</code> button, it will cause the Demo function to re-execute. So every time I click the button, shouldn't <code>console.log('size: ', set.size)</code> will be executed? But in fact it only executed three times. </p>
  
  <p>And why does <code>size</code> keep 2 unchanged? I understand that <code>setCount</code> will replace a new <code>count</code> every time, so <code>size</code> should not increase?</p>
  
  <p>Please help me answer my doubts, thank you very much.</p>
  
  <p>You can test my code <a href="https://codesandbox.io/s/bold-pare-l8l65?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">here</a>.</p>