<p dir="auto">The comma and right parenthesis emitted from JSX-transforming a line like that in the title will result in the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// source JSX
var ExampleCommaIssue = React.createClass({
    render: function () {
        return &lt;div style={({'margin':'42px'})} className=&quot;test&quot; /&gt;;
    }
});

// transforms to 
... React.createElement(&quot;div&quot;, {style: ({'margin':'42px'}, )className: &quot;test&quot;}); ...

// instead of
... React.createElement(&quot;div&quot;, {style: ({'margin':'42px'}), className: &quot;test&quot;}); ..."><pre class="notranslate"><span class="pl-c">// source JSX</span>
<span class="pl-k">var</span> <span class="pl-v">ExampleCommaIssue</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-en">render</span>: <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">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-kos">(</span><span class="pl-kos">{</span><span class="pl-s">'margin'</span>:<span class="pl-s">'42px'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"test"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</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-c">// transforms to </span>
... <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">style</span>: <span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-s">'margin'</span>:<span class="pl-s">'42px'</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">)</span><span class="pl-s1">className</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-c">// instead of</span>
... <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">style</span>: <span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-s">'margin'</span>:<span class="pl-s">'42px'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">className</span>: <span class="pl-s">"test"</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> ...</pre></div>
<p dir="auto">Notably, this only seems to be a problem if some attribute follows the one with the paren-hugged object literal.</p>
<p dir="auto">Also, I did not test to see if arbitrary values in parentheses also result in this.</p>
<p dir="auto">I'm keeping the last values passed as props without force a re-render, I'm using the <code class="notranslate">useRef</code> to store the elements without re-render the output.</p>
<p dir="auto">The weird part is that the values showed are different from what I'm storing, duplicating the last elements.</p>
<p dir="auto">React version: 17.0.2<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/14454/137406585-c89f359b-7777-4d66-ba2d-ecaebae5ac47.png"><img src="https://user-images.githubusercontent.com/14454/137406585-c89f359b-7777-4d66-ba2d-ecaebae5ac47.png" alt="image" style="max-width: 100%;"></a></p>

<p dir="auto">Link to code example:</p>

<p dir="auto"><a href="https://codesandbox.io/s/stupefied-ride-m1did?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/stupefied-ride-m1did?file=/src/App.js</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;

const ComR = React.memo(function Compo({ id, value }) {
  const lastElements = React.useRef([0, 0, 0, 0, 0]);
  const [_, ...m] = [...lastElements.current, value]; // remove first and insert last
  lastElements.current = m;
  console.log(&quot;rendering&quot;, id, value, memo.current);
  return (
    &lt;div&gt;
      {id} - {lastElements.current.join(&quot;, &quot;)}
    &lt;/div&gt;
  );
});

export default function App() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() =&gt; {
    setInterval(() =&gt; {
      setValue(Math.ceil(Math.random() * 10000));
    }, 7000);
  }, [setValue]);

  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;ComR id=&quot;1&quot; value={value} /&gt;
    &lt;/div&gt;
  );
}"><pre class="notranslate"><code class="notranslate">import React from "react";

const ComR = React.memo(function Compo({ id, value }) {
  const lastElements = React.useRef([0, 0, 0, 0, 0]);
  const [_, ...m] = [...lastElements.current, value]; // remove first and insert last
  lastElements.current = m;
  console.log("rendering", id, value, memo.current);
  return (
    &lt;div&gt;
      {id} - {lastElements.current.join(", ")}
    &lt;/div&gt;
  );
});

export default function App() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() =&gt; {
    setInterval(() =&gt; {
      setValue(Math.ceil(Math.random() * 10000));
    }, 7000);
  }, [setValue]);

  return (
    &lt;div className="App"&gt;
      &lt;ComR id="1" value={value} /&gt;
    &lt;/div&gt;
  );
}
</code></pre></div>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The console.log is showing different what is printing into the component</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/14454/137407532-d1fff912-0542-43f8-8c99-5d87da094da2.png"><img src="https://user-images.githubusercontent.com/14454/137407532-d1fff912-0542-43f8-8c99-5d87da094da2.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">expects work as linear array operations, since was called/rendered once</p>