title: React: hiding vs removing components
body: <p>This question is about architecture more than coding.</p>
  <p>Here's the case. In React sometimes we want to hide components. For example, when user opens new page in SPA, when some toast is closed, etc. We can hide them with adding <code>display: none</code>. Or we can remove them from the virtual DOM.</p>
  <pre class="lang-js prettyprint-override"><code>// Hidden div
  &lt;div style={{ display: 'none' }}/&gt;
  
  // Removed div
  {false &amp;&amp; &lt;div/&gt;}
  </code></pre>
  <p>And some of our seniors othen use the first variant. Even if they hide entire page. That's what they say about this method: &quot;This case React prerenders needed content, so when the content must appear, it takes less time&quot;.</p>
  <p>But in this case we can't use lifecycle hooks, because even when component hides, it's not removed. But the main problem as I think, is that real DOM becomes gigantic. And that's brings slowness, isn't it?</p>
  <p>So, what is better?</p>
  <hr />
  <p>I didn't found any conversations about this question. Maybe you could help me.</p>
  <hr />
  <p>EDIT 1: Despite the fact there are some answers I'd like to know more opinions. So, I decided to open up a bounty</p>