title: useEffect is running twice on mount in React
body: <p>I have a counter and a <code>console.log()</code> in an <code>useEffect</code> to log every change in my state, but the <code>useEffect</code> is getting called two times on mount. I'am using React 18. Here is a <a href="https://codesandbox.io/s/musing-tereshkova-21ccr6?file=/src/App.js" rel="nofollow noreferrer">CodeSandbox</a> of my project and the code below:</p>
  <pre><code>import  { useState, useEffect } from &quot;react&quot;;
  
  const Counter = () =&gt; {
    const [count, setCount] = useState(5);
  
    useEffect(() =&gt; {
      console.log(&quot;rendered&quot;, count);
    }, [count]);
  
    return (
      &lt;div&gt;
        &lt;h1&gt; Counter &lt;/h1&gt;
        &lt;div&gt; {count} &lt;/div&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt; click to increase &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default Counter;
  </code></pre>