<p dir="auto">Hi!</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/spicyj/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/spicyj">@spicyj</a> said I should open an issue here. Disclaimer: I'm trying to do sort of sketchy things, and I know this isn't supported, but I think it would be nice.</p>
<p dir="auto">I'm writing a library that I want to support react output optionally. To do this, right now I'm trying to inline all my ReactElements, such as</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    return {
        type: 'hr',
        key: state.key,
        _isReactElement: true
    };"><pre class="notranslate">    <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">type</span>: <span class="pl-s">'hr'</span><span class="pl-kos">,</span>
        <span class="pl-c1">key</span>: <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">key</span><span class="pl-kos">,</span>
        <span class="pl-c1">_isReactElement</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">instead of</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    React.createElement('hr', {
        key: state.key
    })"><pre class="notranslate">    <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">'hr'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
        <span class="pl-c1">key</span>: <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">key</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">This is almost completely functional, except for the <code class="notranslate">_store</code> validation in react dev mode. This is because right now these literals don't have a <code class="notranslate">_store</code> key with <code class="notranslate">.validated</code> or <code class="notranslate">.originalProps</code>, which are assumed by the validators in React <strong>DEV</strong>. I can work around this, but to do so without duplicating props will have to write a wrapper function to create the element, which is a little unideal and slower (and adds unnecessary keys in non-dev mode).</p>
<p dir="auto">Would it be reasonable to short circuit some of these checks so that they only happen if _store is actually present on the ReactElement? If so, I'd be happy to submit a pull request (no rush for react 0.13 though).</p>
<p dir="auto">Curious as to your thoughts. Thanks!<br>
Aria</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
Elements with the same key are not deduplicated, which in itself is not unreasonable, I guess, since having duplicate keys is undefined behavior. However, on subsequent rerenders the duplicate elements remain in the render tree with no way to remove them.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce</strong><br>
<a href="https://codepen.io/asana/pen/ZaaKzQ" rel="nofollow">https://codepen.io/asana/pen/ZaaKzQ</a> (follow the instructions)</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Elements with the same key are deduplicated (this was the behavior in React 15: <a href="https://codepen.io/asana/pen/RjjVbJ" rel="nofollow">https://codepen.io/asana/pen/RjjVbJ</a>). Or, at the very least, duplicate elements are appropriately cleaned up in subsequent rerenders.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
Mac Chrome, React 16+. Working in 15.</p>