When and why do I need to call StateHasChanged or InvokeAsync(StateHasChanged)?

[MarvinKlein1508]

Hey everyone,

I try to figure out when I should call StateHasChanged(); and await InvokeAsync(StateHasChanged);.

Consider the following code:

private bool _loadingFailure;
private bool _loading;
private bool _loading2;
private string _statusFailure = String.Empty;
private string _status = String.Empty;
private string _status2 = String.Empty;

private async Task SubmitAsyncFailure()
{
	_loadingFailure = true;
	_statusFailure = "Connecting to database..."; // Displayed
	await Task.Delay(5000);
	_statusFailure = "Updating data..."; // Not displayed
	await Task.Delay(5000);
	_statusFailure = "Clean up database..."; // Not displayed
	await Task.Delay(5000);
	_statusFailure = "Finished"; // Displayed
	_loadingFailure = false;
}

private async Task SubmitAsync()
{
	_loading = true;
	_status = "Connecting to database...";
	await Task.Delay(5000);
	_status = "Updating data...";
	await InvokeAsync(StateHasChanged);
	await Task.Delay(5000);
	_status = "Clean up database...";
	await InvokeAsync(StateHasChanged);
	await Task.Delay(5000);
	_status = "Finished";
	_loading = false;

}

private async Task SubmitAsync2()
{
	_loading2 = true;
	_status2 = "Connecting to database...";
	await Task.Delay(5000);
	_status2 = "Updating data...";
	StateHasChanged();
	await Task.Delay(5000);
	_status2 = "Clean up database...";
	StateHasChanged();
	await Task.Delay(5000);
	_status2 = "Finished";
	_loading2 = false;
}

@if (_loadingFailure)
{
    <button type="button" class="btn btn-primary" disabled>Loading...</button>
}
else
{
    <button type="button" class="btn btn-primary" @onclick="SubmitAsyncFailure">SendAsyncFailure</button>
}

@_statusFailure
<p class="my-3"></p>
@if (_loading)
{
    <button type="button" class="btn btn-primary" disabled>Loading...</button>
}
else
{
    <button type="button" class="btn btn-primary" @onclick="SubmitAsync">SendAsync</button>
}

@_status

<p class="my-3"></p>

@if (_loading2)
{
    <button type="button" class="btn btn-primary" disabled>Loading...</button>
}
else
{
    <button type="button" class="btn btn-primary" @onclick="SubmitAsync2">SendAsync2</button>
}

@_status2

<br />

Why does the UI get not refreshed automatically within the method SubmitAsyncFailure() ? I thought async and await should keep the UI thread alive so it can update. Why does the UI get refreshed before the first await but not afterwards, except for the end of the method?

What is the main difference between StateHasChanged() and await InvokeAsync(StateHasChanged); ? In which scenario should I call these ? It seems like both of them are working.

I uploaded the code here: https://github.com/MarvinKlein1508/AsyncAwaitDemo

Thank you for your help! :)

[emimontesdeoca]

First, as said in the documentation, StateHasChanged is called automatically for EventCallback methods and after any lifecycle methods.

---

Why does the UI get not refreshed automatically within the method SubmitAsyncFailure() ? I thought async and await should keep the UI thread alive so it can update. Why does the UI get refreshed before the first await but not afterwards, except for the end of the method?

When the SubmitAsyncFailure function is fired, it will also fire two lifecycle events OnAfterRender and OnAfterRenderAsync which will render the component, these methods are only supposed to fire once and then again when your first await method completes.

In a comment recently created by @SteveSandersonMS in #16119, it explains what happens when you have multiple await methods and you are not using StateHasChanged and why it does work like you think it will.

Pasted from the discussion

When an asynchronous handler involves multiple asynchronous phases

@page "/counter"

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
        // Renders here automatically

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        StateHasChanged();

        await Task.Delay(1000);
        currentCount++;
        // Renders here automatically
    }
}

The way that tasks are defined in .NET means that a receiver of the Task can only observe its final completion, not any intermediate asynchronous states. So, ComponentBase can only know about triggering re-rendering when you first return the Task and when that Task finally completes. It cannot know to re-render at other intermediate points. So if you do want to re-render at intermediate points, use StateHasChanged().

End pasted from the discussion

More about this information was also documented in #18815 written by @Webreaper.

---

What is the main difference between StateHasChanged() and await InvokeAsync(StateHasChanged); ? In which scenario should I call these ? It seems like both of them are working.

The difference between using StateHasChanged and InvokeAsync(StateHasChanged); in reality would be when to use InvokeAsync was also addressed on the comment from @SteveSandersonMS.

Pasted from the discussion

When receiving a call from something external to the Blazor rendering and event handling system

ComponentBase only knows about its own lifecycle methods and Blazor-triggered events. It doesn't know about anything else that can trigger your code.

For example, if you have a custom data store that raises C# events, then those C# events are unknown to Blazor. As another example, consider the following "counter" component that uses System.Timers.Timer to update the count at a regular interval:

@page "/counter"
@using System.Timers
@implements IDisposable

<p>Current count: @currentCount</p>

@code {
    private int currentCount = 0;
    private Timer timer = new Timer(1000);

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            currentCount++;
            StateHasChanged();
        });
    }

    void IDisposable.Dispose() => timer.Dispose();
}

In this example, OnTimerCallback has to call StateHasChanged() for the UI to be updated, because otherwise Blazor doesn't know anything is happening. OnTimerCallback runs outside of any Blazor-managed rendering flow or event notification.

Similarly, because this callback is invoked outside Blazor's synchronization context, it's necessary to wrap the logic in InvokeAsync to move it onto the renderer's synchronization context. StateHasChanged() can only be called from the renderer's synchronization context and will throw an exception otherwise. This is equivalent to marshalling to the UI thread in other UI frameworks.

End pasted from the discussion

For a more in depth explanation you can check this article which explains why it's necessary to use InvokeAsync in methods that are not in the Blazor's synchronization context.

---

References:

• StateHasChanged Explained (vs base.InvokeAsync(StateHasChanged) AspNetCore.Docs#16119
• Clearer documentation/samples on loading data and OnInitializedAsync being called twice (Blazor-server) #18815
• await inside OnInitAsync causes the browser to hang #15463 (comment)
• Thread safety using InvokeAsync

[MarvinKlein1508]

Hi @emimontesdeoca,

thank you for this beautiful post. It really helps me to understand this topic much easier.

However, I'm still trying to figure out what I'm doing wrong. I have three functions. Which I paste here in right order.

The first one is located within my razor component

public async Task SearchAsync()
{
	loading = true;
	
	cancellationToken.Cancel();
	searchResults.Clear();

	cancellationToken = new CancellationTokenSource();

	await foreach(var article in lieferantenService.SucheLieferantenArtikelAsync(Filter, cancellationToken.Token))
	{
		if(article != null)
		{
			searchResults.Add(article);
			StateHasChanged();
		}
	}

	loading = false;
}

the field loading is used to lock a button on the UI.

@if (loading)
{
	<button class="btn btn-primary" disabled>Loading...</button>
}
else
{
	<button class="btn btn-primary">Search</button>
}

As you can see it is calling the function SucheLieferantenArtikelAsync

public async IAsyncEnumerable<Lieferantenartikel?> SucheLieferantenArtikelAsync(LieferantenArtikelFilter filter, [EnumeratorCancellation] CancellationToken cancellationToken)
{
	string sql = filter.ToSqlQuery(_fbController);
	_fbController.AddParameter("@ARLI_N_LIEFNR", filter.Lieferantennummer);            

	var data = await _fbController.SelectDataAsync(sql);

	foreach (DataRow row in data.Rows)
	{
		if (!cancellationToken.IsCancellationRequested)
		{
			string articleNumber = row.Field<string>("ARLI_A_ARTIKELNR");
			if (!String.IsNullOrWhiteSpace(articleNumber))
			{
				yield return await Lieferantenartikel.GetLieferantenartikelAsync(articleNumber, filter.Lieferantennummer, _fbController);
			}
				
		}
	}
}

This one just fecthes the IDs of my needed items from the database. For every found ID it calls the function GetLieferantenartikelAsync this one actually loads the data for my search into an object.

There is also the function SelectDataAsync which just calls the Async methods of an database provider - in this case Firebird.

public async Task<DataTable> SelectDataAsync(string selectCommand, string tableName = "")
{
	DataTable data = new DataTable(tableName);
	Command.CommandType = CommandType.Text;
	Command.CommandText = selectCommand;
	var reader = await Command.ExecuteReaderAsync();
	data.Load(reader);
	ClearParameters();
	return data;
}

There are also async methods to just fetch a row instead of a table, which are being used within the GetLieferantenartikelAsync method.

All calls are of type async Task<X> and all are awaited within the software. However, the UI won't refresh when the variable loading changes.

It only does when I change my first method into this piece of code:

public async Task SearchAsync()
{
	loading = true;
	await Task.Run(async () =>
	{
		cancellationToken.Cancel();
		searchResults.Clear();

		cancellationToken = new CancellationTokenSource();

		await foreach(var article in lieferantenService.SucheLieferantenArtikelAsync(Filter, cancellationToken.Token))
		{
			if(article != null)
			{
				searchResults.Add(article);
				await InvokeAsync(StateHasChanged);
			}
		}
	});

	loading = false;
}

It works but this not a good solution because the methods are working with a database and you shouldn't put IO heavy work into Task.Run. But why does my UI not update without this change?

[emimontesdeoca]

Hey @MarvinKlein1508, nice to know that the answer was helpful, I actually learned a lot while looking for more information 😁

I looked at your code a created a simpler version with some timeouts that contains the keys of you problem, I changed the functions' name to something more undestanable: SearchAsync has the same name, GetDataFirst as SucheLieferantenArtikelAsync and DoSomethingYieldable as SucheLieferantenArtikelAsync.

Also added a bit of style so it's easier to see the updated results while they are yielded.

@page "/"
@using System.Threading;
@using System.Runtime.CompilerServices;

<div class="container text-center mt-4 mb-4">
    @if (loading)
    {
        <button class="btn btn-primary" disabled>Loading...</button>
    }
    else
    {
        <button class="btn btn-primary" @onclick="SearchAsync">Search</button>
    }

    <br />
    <br />

    @if (searchResults != null)
    {
        @foreach (var item in searchResults)
        {
            <p>@item</p>
        }
    }
</div>


@code {

    public bool loading { get; set; } = false;
    public CancellationTokenSource cancellationToken { get; set; } = new CancellationTokenSource();
    public List<string> searchResults { get; set; } = new List<string>();

    public async Task SearchAsync()
    {
        loading = true;

        cancellationToken.Cancel();

        cancellationToken = new CancellationTokenSource();

        await foreach (var article in GetDataFirst(cancellationToken.Token))
        {
            if (article != null)
            {
                searchResults.Add(article);
                StateHasChanged();
            }
        }

        loading = false;
    }

    public async IAsyncEnumerable<string?> GetDataFirst([EnumeratorCancellation] CancellationToken cancellationToken)
    {
        foreach (var value in SelectDataAsync())
        {
            if (!cancellationToken.IsCancellationRequested)
            {
                if (!String.IsNullOrWhiteSpace(value))
                {
                    yield return await DoSomethingYieldable(value);
                }
            }
        }
    }

    public async Task<List<string>> SelectDataAsync()
    {
        var result = new List<string>();
        Random rnd = new Random();

        for (int i = 0; i < 10; i++)
        {
            result.Add($"Item {i} fetched at {DateTime.UtcNow.ToString("hh:mm:ss.fff tt")}");
        }

        return result;
    }

    public async Task<string> DoSomethingYieldable(string str)
    {
        Random rnd = new Random();
        var mult = rnd.Next(0, 5);
        await Task.Delay(mult * 500);

        return str + $" - yielded at {DateTime.UtcNow.ToString("hh:mm:ss.fff tt")}";
    }
}

This will result on the values being updated as soon as they reach the if (article != null) { } block because of the StateHasChanged, here you have a little demonstration of my attempt.

You can click the search button again

Let's see if it helps you to understand how it works so you can make it your code work 😉

[MarvinKlein1508]

Hi @emimontesdeoca

thanks for your try but I do not see any difference to my code.

Except you are not awaiting the results in GetDataFirst.

Also I have another await method before the foreach loop in this methods. 🤔

[emimontesdeoca]

Is like yours, isn't it?

await foreach(var article in lieferantenService.SucheLieferantenArtikelAsync(Filter, cancellationToken.Token))
	{
		if(article != null)
		{
			searchResults.Add(article);
			StateHasChanged();
		}
	}

await foreach (var article in GetDataFirst(cancellationToken.Token))
      {
          if (article != null)
          {
              searchResults.Add(article);
              StateHasChanged();
          }
      }

[MarvinKlein1508]

My code is more like this:

public async IAsyncEnumerable<string?> GetDataFirst([EnumeratorCancellation] CancellationToken cancellationToken)
    {
// Something is happening here that becomes awaited
await Task.Delay(3000);
        await foreach (var value in SelectDataAsync())
        {
            if (!cancellationToken.IsCancellationRequested)
            {
                if (!String.IsNullOrWhiteSpace(value))
                {
                    yield return await DoSomethingYieldable(value);
                }
            }
        }
    }

Why did you declar SelectDataAsync as async Task if you example does not do anything async here?

[MarvinKlein1508]

@emimontesdeoca

GetFirst() fetches 30 rows from the database returning just the ID of the record this is happening in my code right here:
var data = await _fbController.SelectDataAsync(sql);

After the ids are fetched, it loops them and calls my second method GetLieferantenartikelAsync() which is also called with an await statement. This method is loading the data for the ID from the database with await SelectDataAsync().

The result gets then yielded back to SearchAsync() which calls StateHasChanged() for ever result. However it only refreshes when all data is loaded.