title: Is component rendered twice? Is it codesandbox problem?
body: <p>Here is my simple React-app:</p>
  <pre><code>let idCounter = 0;
  
  export default function App() {
    const id = useMemo(() =&gt; {
      console.log(&quot;useMemo&quot;);
      return idCounter++;
    }, []);
  
    console.log(&quot;render&quot;, id);
  
    useEffect(() =&gt; {
      console.log(&quot;useEffect&quot;, id);
    });
  
    return id;
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/morning-bush-swky8" rel="nofollow noreferrer">https://codesandbox.io/s/morning-bush-swky8</a></p>
  <p>This is the console output:</p>
  <pre><code>useMemo
  render 0
  useEffect 1
  </code></pre>
  <p>Why in <strong>useEffect</strong> <code>id</code> is equal to <strong>1</strong>?</p>
  <p>Seems like the component has been rendered twice, but why <strong>useMemo</strong> and <strong>useEffect</strong> haven't been called for the second time? How <strong>id</strong> became <strong>1</strong>?</p>