<p dir="auto">React version: 18.0.x, 18.1.x, 18.2.x</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Visit provided sandbox</li>
<li>Open console and observe logs displayed twice.</li>
<li>Click the button and observe the rendering log happens twice, the effect log happens once.</li>
</ol>
<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/react-18-use-effect-bug-iqn1fx" rel="nofollow">https://codesandbox.io/s/react-18-use-effect-bug-iqn1fx</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The useEffect callback runs twice for initial render, probably because the component renders twice. After state change the component renders twice but the effect runs once.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">I should not see different number of renders in dev and prod modes.</p>
<h2 dir="auto">Extras</h2>
<p dir="auto">The code to reproduce:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { useEffect, useReducer } from &quot;react&quot;;
import &quot;./styles.css&quot;;

export default function App() {
  const [enabled, toggle] = useReducer((x) =&gt; !x, false);

  useEffect(() =&gt; {
    console.log(
      &quot;You will see this log twice for dev mode, once after state change - double effect call&quot;
    );
  }, [enabled]);

  console.log(&quot;You will see this log twice for dev mode - double rendering&quot;);

  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
      &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;button onClick={() =&gt; toggle()}&gt;
        Toggle me: {enabled ? &quot;on&quot; : &quot;off&quot;}
      &lt;/button&gt;
    &lt;/div&gt;
  );
}
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useEffect</span><span class="pl-kos">,</span> <span class="pl-s1">useReducer</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s">"./styles.css"</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-v">App</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">enabled</span><span class="pl-kos">,</span> <span class="pl-s1">toggle</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useReducer</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">!</span><span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-c1">false</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span>
      <span class="pl-s">"You will see this log twice for dev mode, once after state change - double effect call"</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">enabled</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"You will see this log twice for dev mode - double rendering"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"App"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Hello CodeSandbox<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>Start editing to see some magic happen!<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">toggle</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        Toggle me: <span class="pl-kos">{</span><span class="pl-s1">enabled</span> ? <span class="pl-s">"on"</span> : <span class="pl-s">"off"</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">When trying to use react-addons-perf@15.1.0 in Google Chrome, it is found that after Perf.start(), error messages displayed<br>
Warning: There is an internal error in the React performance measurement code. Did not expect ctor timer to start while componentDidMount timer is still in progress for another instance.<br>
Warning: There is an internal error in the React performance measurement code. We did not expect componentDidMount timer to stop while no timer is still in progress for another instance. Please report this as a bug in React.</p>
<p dir="auto">After I typed Perf.stop() and try to use getWasted - this error message displayed<br>
ReactPerf.js:239 Uncaught TypeError: Cannot read property 'updateCount' of undefined(…)</p>