<p dir="auto">React version: 18.0.0</p>
<p dir="auto">In 18.0.0, StrictMode causes a <code class="notranslate">useEffect</code> with an empty deps array to execute twice when a component mounts. This did not happen in 17.0.2.</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">Add a <code class="notranslate">useEffect</code> with an empty deps array, e.g</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="useEffect(() =&gt; {
    console.log(&quot;test&quot;)
}, [])"><pre class="notranslate"><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">"test"</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-kos">)</span></pre></div>
<p dir="auto">And ensure StrictMode is enabled:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &lt;StrictMode&gt;
    &lt;App /&gt;
  &lt;/StrictMode&gt;,"><pre class="notranslate">  <span class="pl-c1">&lt;</span><span class="pl-ent">StrictMode</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">StrictMode</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span></pre></div>

<p dir="auto">Link to code example:</p>
<p dir="auto">React 17.0.2: <a href="https://codesandbox.io/s/youthful-smoke-z3nxmv" rel="nofollow">https://codesandbox.io/s/youthful-smoke-z3nxmv</a><br>
React 18.0.0: <a href="https://codesandbox.io/s/nervous-tess-7qsm1r" rel="nofollow">https://codesandbox.io/s/nervous-tess-7qsm1r</a></p>
<p dir="auto">Observe that in the 18.0.0 version, the <code class="notranslate">console.log</code> and <code class="notranslate">fetch</code> statements are executed twice.</p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto"><code class="notranslate">useEffect</code> with empty deps array is executed twice.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">17.0.2 behaviour is preserved, the <code class="notranslate">useEffect</code> is only fired once.</p>
<p dir="auto">Is this an expected change with 18.0.0? One common use case for <code class="notranslate">useEffect</code> is to make a web request - these web requests are now being fired twice when in StrictMode. In the code examples, I am making such a request and both can be seen in the network tab in devtools.</p>
<p dir="auto">To be clear, its not a major issue for me at the moment, but its plausible that the duplicated <code class="notranslate">useEffect</code> call could result in differing behaviour for a component in development with StrictMode vs in production, depending on what the <code class="notranslate">useEffect</code> is doing.</p>
<p dir="auto">Inline styles are awesome. But for <del>better or</del> worse, some CSS properties have vendor-prefixed values. How can we write these inline in React?</p>
<p dir="auto"><code class="notranslate">display: flex</code> is the example I ran into:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".my-container {
  display: flex;
  display: -webkit-flex;
  /* etc */
}"><pre class="notranslate">.<span class="pl-c1">my-container</span> {
  <span class="pl-c1">display</span><span class="pl-kos">:</span> flex;
  <span class="pl-c1">display</span><span class="pl-kos">:</span> -webkit-flex;
  <span class="pl-c">/* etc */</span>
}</pre></div>
<p dir="auto">I found myself building something like</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="render: function() {
  var style = {
    display: &quot;flex&quot;,
    display: &quot;-webkit-flex&quot;
  };
  return &lt;div style={style}&gt;/*...*/&lt;/div&gt;
};"><pre class="notranslate">render: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">style</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">display</span>: <span class="pl-s">"flex"</span><span class="pl-kos">,</span>
    <span class="pl-c1">display</span>: <span class="pl-s">"-webkit-flex"</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">style</span><span class="pl-kos">}</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></pre></div>
<p dir="auto">only to be reminded by the linter that it won't work.</p>
<p dir="auto">What to do in these situations?</p>