7

Consider the Blazor WebAssembly App (ASP. NET Core hosted) "empty" project. I adjusted the Counter page as follows:

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

and its Counter.razor.cs file:

public partial class Counter
{
    private static int currentCount = 0;

    private async Task IncrementCountAsync()
    {
        Console.WriteLine("Increment called");

        _ = HeavyComputeAsync();

        currentCount++;

        Console.WriteLine($"Counter = {currentCount}");
    }

    private static Task<int> HeavyComputeAsync()
    {
        return Task.Run(() =>
        {
            Console.WriteLine("Task start");

            for (long ndx = 0; ndx < 1000000; ++ndx)
                ndx.ToString();

            Console.WriteLine("Task end");
            return 0;
        });
    }
}

I'm calling the HeavyComputeAsync method as _ = ... which should not wait until the IncrementCountAsync method finishes, but immediately update the currentCount.

When I run the application I can see in the console the expected behavior:

Increment called
Counter = 1
Task start
Task end (after a while)

However the UI freezes, it does not update the counter. To be exact sometimes it immediately updates :-O, however most of the time the counter is updated after the task is finished only.

I expected the Task runs in parallel (in another thread) and should not block the UI.

I know the IncrementCountAsync runs synchronously in this case since I'm calling _ = HeavyComputeAsync. I tried to call it with await = ... but even in such case the UI is frozen, I can't click other pages.

How can I achieve the UI immediate update?

Thanks, Csaba :-)

Csaba
  • 301
  • 3
  • 11

2 Answers2

15

In Blazor WebAssembly you only have 1 thread. That is (currently) a Browser / JavaScript limitation that also holds for all Wasm applications.

So Task.Run() does not work as it would on the Server. The code will have to execute on the main thread.

Any 'heavy operation' will block the UI, that is the expected behaviour.

The only thing you can do here is to break it into a number of smaller steps and run those with or without Task.Run(), the UI can be made to update in the gaps between them.

I have posted a related answer with sample code here

H H
  • 263,252
  • 30
  • 330
  • 514
  • I totally agree but probably If we put `StateHasChange()` inside task, it should update the view accordingly – StPaulis May 18 '20 at 09:01
  • 1
    Only when you release the thread for a bit - see for instance https://stackoverflow.com/a/60584976/60761 – H H May 18 '20 at 09:38
  • This is pretty sad :-(, hope it will be addressed soon. Thanks for the help :-) – Csaba May 18 '20 at 10:42
  • Blazor can't change that, we have to wait for the next JS & Wasm updates. – H H May 18 '20 at 11:21
  • I think I saw somewhere that the wasm guys in Chrome are working on actual multitasking (multithreading), so maybe we'll get that for free in Blazor – rdmptn May 20 '20 at 18:17
0

Your class should be like the one below. Realize that Blazor WebAssembly runs under the same thread JavaScript runs; that is, a single UI thread. So using Task.Run here does not work. Use Task.Delay as I do here, and verify if the async feature of Blazor works. Yes, it does. You should also realize in this context that asynchronous is not parallelism programming, when two or more threads run in parallel. 

public partial class Counter
{
    private static int currentCount = 0;

    private async Task IncrementCountAsync()
    {
        Console.WriteLine("Increment called");

        currentCount++;



        await Task.Delay(5000);

        Console.WriteLine($"Counter = {currentCount}");


    }

}

The code here is for demo purposes only, but if you want to perform a long running operation you may use this sample code

enet
  • 41,195
  • 5
  • 76
  • 113