title: React useState cause double rendering
body: <p>Consider the canonical <code>useState</code> example:</p>
  
  <pre><code>import React, { useState } from 'react';
  
  const MyComponent = () =&gt; {
    const [count, setCount] = useState(0);
    console.log(count);
    return (
      &lt;div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}&gt;
        count: {count}
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default MyComponent;
  </code></pre>
  
  <p>Clicking the button makes each state print twice. Why is that?</p>
  
  <p><a href="https://i.stack.imgur.com/F4YOa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F4YOa.png" alt="screenshort"></a></p>