Search code examples
razor.net-corerazor-pagesblazorblazor-client-side

In Blazor client app (razor component), does every event triggered refresh the UI?


Does in Blazor client app every event triggered (mouse, keyboard, touch,...) cause the whole UI refreshed? In the below example, on every key input, i is incremented while it not bound to oninput event.

<input type="text" @bind-value="@name" @bind-value:event="oninput"/>
@name
@ComputeResult()

@code {

string name;
int i=0;

public double ComputeResult()
{
    i = i + 1;
    return i;
}

}

Solution

  • Only DOM elements that have changes get updated, not the entire UI. Blazor uses what they call a Render Tree to keep track of the elements that have changed and need to be updated. When an event fires, it regenerates the Render Tree and compares it to the old one to find changes, and then only updates the changed items in the render tree in the DOM.

    Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

    After the component is initially rendered, the component regenerates its render tree in response to events. Blazor then compares the new render tree against the previous one and applies any modifications to the browser's Document Object Model (DOM).

    From: https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1