<p dir="auto">Alright, kind of a React newb but React is not following the principle of least surprises with this one so I have to ask.</p>
<p dir="auto">Our team only really wants serverside rendering for a particular project. We don't need to do much special on the client.</p>
<p dir="auto">However, as far as I have learned, you need to have a reference to the same React components on the client as you do on the server in order to actually get dynamic behavior (events are bound etc) on the client.</p>
<p dir="auto">My question is, if we have a <code class="notranslate">&lt;div id='react-root'&gt; &lt;/div&gt;</code></p>
<p dir="auto">why isn't React setup so that on the front-end we could just call:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="ReactDOM.render(document.getElementById('react-root');"><pre class="notranslate"><span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'react-root'</span><span class="pl-kos">)</span><span class="pl-kos"></span><span class="pl-kos">;</span></pre></div>
<p dir="auto">(without the React component first argument.)</p>
<p dir="auto">Doesn't / couldn't React have enough info to go off of already, so as to not need an actual reference to the React component on the front-end as well? As long as React on the front-end has a reference to the root DOM node, couldn't / shouldn't that be enough?</p>
<p dir="auto">The whole thing where you have to re-render on the client is kinda unexpected. I am sure I am missing something, or there must be some good reason why the lib works this way, I just don't know and want to know which is why I am writing this. Thanks.</p>
<p dir="auto">Describe what you were doing when the bug occurred:</p>
<ol dir="auto">
<li>Click on "ranked" in the Profiler</li>
</ol>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.2.0-a8b8ffb89</p>
<p dir="auto">Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:156567<br>
at Map.forEach ()<br>
at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:156513)<br>
at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157036)<br>
at gl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314363)<br>
at fi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59263)<br>
at lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:103717)<br>
at kc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89467)<br>
at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89392)<br>
at pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:86341)</p>
<p dir="auto">Component stack: in gl<br>
in div<br>
in div<br>
in div<br>
in _o<br>
in Unknown<br>
in n<br>
in Unknown<br>
in div<br>
in div<br>
in zi<br>
in Ge<br>
in un<br>
in ba<br>
in Rc</p>