title: React memo get magically executed twice
body: <p>i'm creating a react app with <code>useMemo</code>.<br />
  The memo uses empty array as the dependency list, so it should be executed once, right?</p>
  <p>Inside the memo, there are <code>console.log()</code> &amp; <code>counter++</code> to visualize how many times the memo get executed.</p>
  <p>Magically, I got <strong>one log</strong> but the counter seems <strong>executed twice</strong>.</p>
  <p><a href="https://codesandbox.io/s/react-memo-y7p99?file=/src/App.js" rel="nofollow noreferrer">See this sandbox</a> or see the code below:</p>
  <pre><code>import {
      useMemo,
  }                           from 'react'
  
  
  let counter = 0;
  export default function App() {
      const foo = useMemo(() =&gt; {
          console.log('increase counter');
  
          counter++;
      }, []);
  
  
      return (
          &lt;p&gt;
              {counter}
          &lt;/p&gt;
      );
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/R5HjL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R5HjL.png" alt="enter image description here" /></a></p>