title: Blazor Component Reference Null on First Render
body: <p>I have a custom  component with an event Action called TabChanged. In my Razor page I set the reference to it up like so:</p>
  
  <pre><code>&lt;TabSet @ref="tabSet"&gt;
   ...
  &lt;/TabSet&gt;
  
  @code {
      private TabSet tabSet;   
      ...
  }
  </code></pre>
  
  <p>In the <strong>OnAfterRenderAsync</strong> method I assign a handler to the event:</p>
  
  <pre><code>protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if(firstRender)
      {
          tabSet.TabChanged += TabChanged;
      }       
  }
  </code></pre>
  
  <p>The first time the page renders I get a <strong>System.NullReferenceException: Object reference not set to an instance of an object</strong> error.</p>
  
  <p>If I switch to use subsequent renders it works fine:</p>
  
  <pre><code>protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if(!firstRender)
      {
          tabSet.TabChanged += TabChanged;
      }       
  }
  </code></pre>
  
  <p>But of course this is sloppy and I will be firing multiple event handlers as they stack up during renders.</p>
  
  <p>How can I assign the reference one time and on first render? I am following the docs as outlined <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#capture-references-to-components" rel="noreferrer">here</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the TabSet.razor file:</p>
  
  <pre><code>@using Components.Tabs
  
  &lt;!-- Display the tab headers --&gt;
  &lt;CascadingValue Value="this"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          @ChildContent
      &lt;/ul&gt;
  &lt;/CascadingValue&gt;
  
  &lt;!-- Display body for only the active tab --&gt;
  &lt;div class="nav-tabs-body" style="padding:15px; padding-top:30px;"&gt;
      @ActiveTab?.ChildContent
  &lt;/div&gt;
  
  @code {
  
      [Parameter]
      public RenderFragment ChildContent { get; set; }
  
      public ITab ActiveTab { get; private set; }
  
      public event Action TabChanged;
  
  
      public void AddTab(ITab tab)
      {
          if (ActiveTab == null)
          {
              SetActiveTab(tab);
          }
      }
  
      public void RemoveTab(ITab tab)
      {
          if (ActiveTab == tab)
          {
              SetActiveTab(null);
          }
      }
  
      public void SetActiveTab(ITab tab)
      {
          if (ActiveTab != tab)
          {
              ActiveTab = tab;
              NotifyStateChanged();
              StateHasChanged();
          }
      }
  
      private void NotifyStateChanged() =&gt; TabChanged?.Invoke();
  
  }
  </code></pre>
  
  <p>TabSet also uses Tab.razor:</p>
  
  <pre><code>@using Components.Tabs
  @implements ITab
  
  &lt;li&gt;
      &lt;a @onclick="Activate" class="nav-link @TitleCssClass" role="button"&gt;
          @Title
      &lt;/a&gt;
  &lt;/li&gt;
  
  @code {
      [CascadingParameter]
      public TabSet ContainerTabSet { get; set; }
  
      [Parameter]
      public string Title { get; set; }
  
      [Parameter]
      public RenderFragment ChildContent { get; set; }
  
  
      private string TitleCssClass =&gt; ContainerTabSet.ActiveTab == this ? "active" : null;
  
      protected override void OnInitialized()
      {
          ContainerTabSet.AddTab(this);
      }
  
      private void Activate()
      {
          ContainerTabSet.SetActiveTab(this);
      }
  }
  </code></pre>
  
  <p>And ITab.cs Interface</p>
  
  <pre><code>using Microsoft.AspNetCore.Components;
  
  namespace PlatformAdmin.Components.Tabs
  {
      public interface ITab
      {
          RenderFragment ChildContent { get;  }
  
          public string Title { get; }
      }
  }
  </code></pre>
  
  <p>It's taken from a Steve Sanderson example found <a href="https://gist.github.com/SteveSandersonMS/f10a552e1761ff759b1631d81a4428c3" rel="noreferrer">here</a></p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Here is the debugger showing tabSet is null on first render:</p>
  
  <p><a href="https://i.stack.imgur.com/ONxFB.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ONxFB.jpg" alt="enter image description here"></a></p>
  
  <p>And not null on additional renders:</p>
  
  <p><a href="https://i.stack.imgur.com/WhN1m.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/WhN1m.jpg" alt="enter image description here"></a></p>