<p dir="auto">Apologies if this is the wrong place to ask the question, but I thought it might be better to have this explained somewhere that wasn't as ephemeral as the IRC channel…</p>
<p dir="auto">Storing an instance and trying to reuse it results in <a href="https://github.com/facebook/react/blob/eebcf9f888b8a8fc3ed1f31c2789584a235aa089/src/core/ReactComponent.js#L255-L261">an error</a>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Can only mount an unmounted component. Make sure to avoid storing components between renders or reusing a single component instance in multiple places."><pre class="notranslate"><code class="notranslate">Can only mount an unmounted component. Make sure to avoid storing components between renders or reusing a single component instance in multiple places.
</code></pre></div>
<p dir="auto">Recently, I started wondering, if these are just descriptors, why is that desired behavior? Or is it a concession for the sake of performance? It seems like there are some good reasons (memoization, worry-free duplication, etc) why it would be preferable for React not to mutate them so they could be reused.</p>
<p dir="auto">Thanks!</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Feature</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
There is no way to run a side-effect generating hook before the first render.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
For certain platforms (like Meteor) the reactive data access paradigm both runs immediately (data can be available on first render), and sets up side effects for later updates. I'd like to be able to set all that up <em>before</em> the first render, instead of waiting a render pass with <code class="notranslate">useEffect</code>. <a href="https://github.com/meteor/react-packages/pull/271" data-hovercard-type="pull_request" data-hovercard-url="/meteor/react-packages/pull/271/hovercard">Currently</a>, we have to jump through hoops to make sure sure we don't generate side-effects early, then duplicate effort later to actually set up the desired side effects. (we had been simply setting up the side-effects in sync with render, but understand that <a href="https://overreacted.io/algebraic-effects-for-the-rest-of-us/#how-is-all-of-this-relevant-to-react" rel="nofollow">upcoming Suspense features</a> may cancel a render cycle, and never run the <code class="notranslate">useEffect</code> cleanup hook). A hook which ran before render (or synchronously with first render) with it's cleanup method in case the render pass is thrown away, would solve the issue nicely, without hoop jumping.</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>
16.8.x. Previous versions of react had life cycle methods <code class="notranslate">componentWillMount</code> or even just the constructor which could be used for similar behavior.</p>