title: How to preserve component instances in Blazor
body: <p>I have a similar component and I whish to save the instance of the <code>InnerComponent</code> the first time it is rendered and render the same instance every time without reinstanceiating it.</p>
  <pre><code>@if(isVisible)
  {
      &lt;InnerComponent @ref=&quot;@_InnerComponent&quot; @key=&quot;@(&quot;InnerComponentKey&quot;)&quot;&gt;
          @ChildContent
      &lt;/InnerComponent&gt;
  }
  
  @code{
      [Parameter] public InnerComponent _InnerComponent { get; set; }
      private bool IsVisible { get; set; }
  }
  </code></pre>
  <p>When the inner component is visible the user can manipulate its state.
  But if <code>IsVisible</code> gets set to false and then true again, the inner component gets rerendered overriding <code>_InnerComponent</code> and thus we lose track of the changes that the user made to that <code>InnerComponent</code> instance.</p>
  <p>Adding @key does not seem to help preserve the instance either. It just gets rerendered and overwritten :/ I am sure, that I am feeding it the same key both times it gets rendered, but I don't know how to inspect the keys that it gets compared to.</p>
  <p>If it is possible to render a component instance I could do something like the following, but I can't seem to find a way to do that.</p>
  <pre><code>@if(isVisible)
  {
      @if(_InnerComponent == null)
      {
          &lt;InnerComponent @ref=&quot;@_InnerComponent&quot; @key=&quot;@(&quot;InnerComponentKey&quot;)&quot;&gt;
              @ChildContent
          &lt;/InnerComponent&gt;
      }
      else
      {
          @_InnerComponent.Render()
      }
  }
  </code></pre>
  <p>I am taking criticism on my question since I haven't asked many :)</p>
  <p>Thanks in advance!</p>
  <h3>Simplified example:</h3>
  Let's say we have the following component that I am going to call `CounterContainer` , where `&ltCounter&gt` is the counter component from the default Blazor project template.
  <pre><code>@if(CounterIsVisible)
  {
      &lt;Counter @ref=&quot;@_Counter&quot; @key=&quot;@(&quot;CounterKey&quot;)&quot; /&gt;
  }
  
  &lt;button @onclick=&quot;() =&gt; CounterIsVisible = !CounterIsVisible&quot;&gt;
      Show/Hide counter 
  &lt;/button&gt;
  
  @code{
      [Parameter] public Counter _Counter { get; set; }
      private bool CounterIsVisible { get; set; } = true;
  }
  </code></pre>
  <p>I want to save the <code>_Counter</code> instance, so I can see the correct <code>_Counter.currentCount</code> that I counted to. I could save it using a method from <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-5.0&viewFallbackFrom=aspnetcore-3.0&pivots=server#client-side-in-the-browser" rel="nofollow noreferrer">this article</a>, but I find them all unpractical, because</p>
  <ul>
  <li>the component I am building has much more data than just a single variable</li>
  <li>I need the data only as long as the <code>CounterContainer</code> exists and only for visualisation</li>
  <li>It is just too complicated for my use case</li>
  </ul>
  <p>I already have the <code>Counter</code> reference stored. I just want to view it instead of reinstanceiating it and overwriting the whole thing.</p>
  <p>Hope that made it a bit clearer (:</p>