Should i call StateHasChanged everytime a value is changed

Question

look at this blazor server page:

@page "/"

<div>@Field1</div>
<div>@Field2</div>

<button @onclick="OnBtnClick">Btn</button>

@code
{
    public String Field1 { get; set; }
    public String Field2 { get; set; }

    private async Task OnBtnClick()
    {
        Field1 = "test1";

        // Value is displayed but i have not called StateHasChanged() there...


        await Task.Delay(1000);

        Field2 = "test2";
    }
}

There is something i do not understand:

As you can see, i do not call StateHasChanged.

When i click on the button, i can see "test1" value displayed on the page, then wait 1 second and then i can see "test2".

I know StateHasChanged is automatically called after the event. But is it called automatically before the Task.Delay too ?

Thanks

Answer 1

There is a related question: when to call StateHasChanged() in Blazor component

It appears to indicate that StateHasChanged is automatically called in your example after the Task.Delay function is await-ed.

The other article says the Blazor "internal" event handler code looks like this:

var task = InvokeAsync(EventMethod);
StateHasChanged();
if (!task.IsCompleted)
{
    await task;
    StateHasChanged();
}