title: Why does useState cause the component to render twice on each update?
body: <p>I have this simple bit of code here</p>
  
  <pre><code>import React, { useState } from "react";
  import "./styles.css";
  
  export default function App() {
    const [number, setNumber] = useState(0);
  
    function chaneNumber() {
      setNumber(state =&gt; state + 1);
    }
  
    console.log("here");
    return (
      &lt;div className="App"&gt;
        &lt;button onClick={chaneNumber}&gt;Change number&lt;/button&gt;
        {number}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Every time I click the button, I get 2 logs in my console indicating that the component renders twice. I found one <a href="https://stackoverflow.com/questions/60934080/why-usestate-makes-the-component-to-render-twice">post</a> saying this is about strict mode, but I have not enabled strict mode. Why is this component rendering twice on each state update?</p>
  
  <p>Here is a <a href="https://codesandbox.io/s/still-glitter-zu3p9?file=/src/App.js:0-360" rel="noreferrer">codesandbox</a> link to try it out.</p>