How Blazor Framework get notifed when the property value gets changed

Question

When we have a HTML code like below.

<h1>@Title</h1>

and C# like below

public string Title { get; set; }

Think I have executed a code like below

Title = "New title updated in the runtime";

Then we see that the view has chenged with the new value.

How the renderer knows that the property value has changes. Is there anything like INotifyProperyChange is implemented. How the HTML knows that this is the time to update the content.

I just want to know how the internals of the Blazor Framework are architectured.

Answer 1

Blazor automatically checks for changes of bound properties when a user interaction happened (e.g. button click, text in an input changed). In that case, Blazor's JavaScript code triggers change detection in C# (=Webassembly). Therefore, you do not need to do anything if you want to refresh the UI after a user interaction.

However, there are cases in which you want to refresh the UI although no user interaction happened (e.g. timer). In that case, you have to call StateHasChanged. I have created a more detailed example on learn-blazor.com.