title: React - Preserve DOM Element When Not Rendered and Reuse Later
body: <p>I want to hide and show items in a page in response to user actions, but for efficiency I'm curious if it's possible to save the actual <code>HTMLElement</code>'s and make React reuse/reinsert them when the items are unhidden (but none of their render properties have changed). Assume those items are very taxing to render - for example, a large <code>img</code> whose server prohibits caching.</p>
  <p>The naive approach would be:</p>
  <pre><code>{ this.props.showImage &amp;&amp; &lt;img src=&quot;very-large-non-cachable-image.png&quot;/&gt; }
  </code></pre>
  <p>where <code>showImage</code> would flip based on user input. The problem is that every time the image is hidden and re-shown, the browser has to download the image again (because the server prohibits caching).</p>
  <p>Obviously I can use <code>ref</code> to get the <code>HTMLElement</code> for the <code>img</code>. But, is it possible to make React <em>reuse</em> that HTMLElement after the element is removed and subsequently re-rendered? In other words, to just re-insert the saved/cached <code>HTMLElement</code> back into the DOM?</p>
  <p>P.S. - I realize the scenario I've set up is a little unusual and that an obvious alternative would be to use <code>display: none</code> rather than <code>false</code>ing out the entire <code>img</code>. But please assume for argument's sake that I want and need to do this the way I've described; my true scenario is too complex to fully describe here, but suffice it to say the items are taxing to re-render on each hide/show, but I also don't want them to actually be in the DOM (virtual or otherwise) when not visible (hence <code>display: none</code> is not an option).</p>
  <p>Thanks!</p>