Blazor Architecture

Learning objectives#

• Describe the component tree and render tree
• Explain how UI updates are diffed
• Compare server, WebAssembly and static hosting
• Know the component lifecycle methods

Explanation#

A Blazor app is a tree of components. Rendering a component produces a render tree — an in-memory description of its markup.

When state changes, Blazor renders again, compares (diffs) the new render tree with the previous one and sends only the changes to the DOM.

Where that happens depends on the render mode: on the server with diffs sent over a SignalR “circuit”, in the browser on the .NET WebAssembly runtime, or once per request as plain HTML (static SSR).

Lifecycle: SetParametersAsync → OnInitialized{Async} (once) → OnParametersSet{Async} → render → OnAfterRender{Async}(firstRender). Dispose with IDisposable/IAsyncDisposable.

Code example: Watching the lifecycle#

1@page "/lifecycle"
2@rendermode InteractiveServer
3@implements IDisposable
4

5<button @onclick="() => count++">Clicked @count times</button>
6

7@code {
8    private int count;
9

10    protected override void OnInitialized() => Console.WriteLine("OnInitialized");
11    protected override void OnParametersSet() => Console.WriteLine("OnParametersSet");
12    protected override void OnAfterRender(bool firstRender) =>
13        Console.WriteLine(
quot;OnAfterRender (firstRender: {firstRender})");
14    public void Dispose() => Console.WriteLine("Dispose");
15}

OnInitialized
OnParametersSet
OnAfterRender (firstRender: True)
OnAfterRender (firstRender: False)   ← after each click
Dispose                               ← when you navigate away

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. OnInitialized runs once when the component is created.
2. OnParametersSet runs after parameters are applied.
3. Each click changes state, re-renders, and only the button text is updated in the DOM.
4. Dispose runs when the component leaves the page — the place to unsubscribe from events.

Real-world use case#

Common mistakes#

Best practices#

• Load data in OnInitializedAsync
• Do DOM/JS work in OnAfterRenderAsync(firstRender)
• Implement IDisposable for subscriptions and timers
• Keep render logic cheap

Remember this#

Practice exercise#

1OnInitializedAsync — it runs once when the component starts and supports await.

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.