title: Why is `Promise.then` called twice in a React component but not the console.log?
body: <p>I'm very confused about the output of the following component:</p>
  <pre class="lang-js prettyprint-override"><code>import { StrictMode } from &quot;react&quot;
  import ReactDOM from &quot;react-dom&quot;
  
  function Test(): React.ReactElement {
      console.log('render')
      Promise.resolve()
          .then(() =&gt; console.log('then ' + Math.random()))
      return &lt;&gt;&lt;/&gt;
  }
  
  ReactDOM.render(
    &lt;StrictMode&gt;
      &lt;Test /&gt;
    &lt;/StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  )
  </code></pre>
  <p>It produces the following output at least in Chrome and Firefox:</p>
  <pre><code>00:46:30.264 render
  00:46:30.267 then 0.5430663800781927
  00:46:30.267 then 0.9667426372511254
  </code></pre>
  <p>I would rather expect to see the same count of messages. What am I missing?</p>
  <p>Repro: <a href="https://codesandbox.io/s/elegant-frost-dmcsl" rel="noreferrer">https://codesandbox.io/s/elegant-frost-dmcsl</a></p>
  <p>EDIT: I know that strict mode leads to extra rendering, but as stated, I would then expect the same count of messages.</p>
  <p>EDIT 2: Both answers below are great. I would like to cite comment of @user56reinstatemonica8 here:</p>
  <blockquote>
  <p>Relevant: <a href="https://github.com/facebook/react/issues/21783" rel="noreferrer">Community feedback on console silencing</a></p>
  </blockquote>