<p dir="auto">It would be great if there was a tool which could pull out and report on the elements of the virtual dom which match a given key.  That would really help in tracking down the causes of error messages like "Invariant Violation: flattenChildren(...): Encountered two children with the same key, <code class="notranslate">.NotTheActual/Key String</code>. Children keys must be unique."</p>
<p dir="auto">I'd like to have a function that would reset all the state of react to start rendering from scratch again.</p>
<p dir="auto">Currently, the code below causes a duplication of virtual dom. The React tab in devtools shows <code class="notranslate">&lt;App /&gt;</code> node twice.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="document.body.innerHTML = '&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector(&quot;#app&quot;));

// page change

document.body.innerHTML = '&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector(&quot;#app&quot;));"><pre class="notranslate"><code class="notranslate">document.body.innerHTML = '&lt;div id="app"&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"));

// page change

document.body.innerHTML = '&lt;div id="app"&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"));
</code></pre></div>
<p dir="auto">It is possible to unmount it before the container element is lost to prevent the duplication of vdom.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="document.body.innerHTML = '&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector(&quot;#app&quot;));
ReactDOM.unmountComponentAtNode(document.querySelector(&quot;#app&quot;)); // &lt;--- unmount and remove

// page change

document.body.innerHTML = '&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector(&quot;#app&quot;));"><pre class="notranslate"><code class="notranslate">document.body.innerHTML = '&lt;div id="app"&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"));
ReactDOM.unmountComponentAtNode(document.querySelector("#app")); // &lt;--- unmount and remove

// page change

document.body.innerHTML = '&lt;div id="app"&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"));
</code></pre></div>
<p dir="auto">However, sometimes it is difficult to bind to an event or change a router code in a legacy app where React is used for rendering a page. The page is destroyed when the router decides to change the page to another and React don't get the same container element again.</p>
<p dir="auto">Since you can't call <code class="notranslate">ReactDOM.unmountComponentAtNode</code> before the change, nor after the change (before rendering) with the lost container element, it would be useful to have a function to reset all the React state before rendering the new page.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="document.body.innerHTML = '&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector(&quot;#app&quot;));

// page change

document.body.innerHTML = '&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;';
ReactDOM.reset();  // &lt;--- I don't care about the previous state, I want to render the component from scratch (as there would be no rendering before)
ReactDOM.render(&lt;App /&gt;, document.querySelector(&quot;#app&quot;));"><pre class="notranslate"><code class="notranslate">document.body.innerHTML = '&lt;div id="app"&gt;&lt;/div&gt;';
ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"));

// page change

document.body.innerHTML = '&lt;div id="app"&gt;&lt;/div&gt;';
ReactDOM.reset();  // &lt;--- I don't care about the previous state, I want to render the component from scratch (as there would be no rendering before)
ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"));
</code></pre></div>
<p dir="auto">The name doesn't have to be called <code class="notranslate">reset</code> or be within <code class="notranslate">ReactDOM</code>. The point here is that the rendering should not duplicate virtual dom since the container element was changed.</p>