Unexpected behavior when using @ref method group in callback instead of lambda

[patriksvensson]

I'm sure that I might be doing something wrong here since I'm not in any way a Blazor expert, but I encountered something I consider a bit unexpected.

---

I noticed that I get an exception (The render handle is not yet assigned) when invoking a method group on a @ref instance in an @onclick handler. But I do not get the same exception if I invoke it via a lambda.

i.e., This fails when clicking the MyComponent button:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<button class="btn btn-primary" @onclick="_myComponentRef.ShowComponent">MyComponent</button>

But this succeed when clicking the MyComponent button:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<button class="btn btn-primary" @onclick="() => _myComponentRef.ShowComponent()">MyComponent</button>

HOWEVER, if I first click the Click me button, the MyComponent button succeeds regardless of whether I invoke it via a method group or a lambda.

I've included the source code for the components below if it's any help.
I would really want to understand what is happening here.

---

Counter.cs

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>
<p role="status">Current count: @_currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>


@* This fails *@
<button class="btn btn-primary" @onclick="_myComponentRef.ShowComponent">MyComponent</button>

@* This works *@
@* <button class="btn btn-primary" @onclick="() => _myComponentRef.ShowComponent()">MyComponent</button> *@

<MyComponent @ref="_myComponentRef"></MyComponent>

@code {
    private int _currentCount = 0;
    private MyComponent _myComponentRef = null!;

    private void IncrementCount()
    {
        _currentCount++;
    }

    protected override void OnInitialized()
    {
        _myComponentRef = new MyComponent();
        base.OnInitialized();
    }
}

MyComponent.cs

@if (Show)
{
    <h3>MyComponent</h3>   
}

@code {
    public bool Show { get; set; }
    
    public void ShowComponent()
    {
        Show = true;
    }
}

[yassine-krichen]

The reason the method-group version blows up is simple: when you write

@onclick="_myComponentRef.ShowComponent"

Blazor tries to bind that delegate immediately, during render. It wants a real, fully initialized component reference at that exact moment. But your _myComponentRef isn’t wired up yet. The render handle for the referenced component isn’t assigned, the instance isn’t connected to the render tree, and Blazor basically goes “nope.”

The lambda version:

@onclick="() => _myComponentRef.ShowComponent()"

doesn’t get evaluated at render time. It’s just a little box that Blazor stores and only opens when you click the button. By that time, the component ref has been assigned, the render handle exists, all the internals are finally awake, and everything works.

Now the fun part: clicking the first button fixes everything. Why? Because calling IncrementCount() triggers a re-render. During that re-render, your <MyComponent @ref="_myComponentRef"> gets its reference assigned properly. Now _myComponentRef is an actual component instance in the render tree instead of the sad little new-ed orphan you created in OnInitialized.

Your OnInitialized line here:

_myComponentRef = new MyComponent();

is basically the smoking gun. You’re manually new-ing up a component. Blazor absolutely does not want you to do that. Components must be created by the framework so they get a render handle and lifecycle. When you create one manually, it’s missing half its organs.

[patriksvensson]

@yassine-krichen Thanks for answering. I really appreciate your explanation!

However, I've tried not initializing the MyComponent instance, and that throws an error at first page render: ArgumentException: Delegate to an instance method cannot have null 'this', which makes me believe that it has to be newed up somehow?

[yassine-krichen]

Ah yeah, that one’s annoying but kinda simple. Basically:

• Don’t new the component yourself. Blazor makes it for you, that _myComponentRef thing only exists after render. If you do new, it’s not the real one, and method groups freak out because there’s no “this” yet.

• The method group _myComponentRef.ShowComponent fails at first click because _myComponentRef is still null. The lambda () => _myComponentRef.ShowComponent() works because it waits till you click, by then Blazor already rendered it.

So just:

<button @onclick="() => _myComponentRef.ShowComponent()">MyComponent</button>

• Optional: _myComponentRef?.ShowComponent() if you wanna be extra safe.

Don’t sweat the new. That’s Blazor’s job. Lazy way: lambda, done.

[patriksvensson]

Ok, that explains it. I wish there was some kind of Roslyn Analyzer that could warn about these things, because it's not obvious if you're not well versed in the lifecycle of a Blazor page.

Thanks again for your answer!