State Management

Learning objectives#

• Choose where state should live
• Keep filters in the URL
• Persist state in browser storage
• Avoid double loading with prerendering

Explanation#

Component fields are lost when the component is removed. State containers live for the circuit or app.

URL state (query strings) survives refreshes and can be shared — ideal for filters and paging.

ProtectedLocalStorage/ProtectedSessionStorage (server) or localStorage via JS interop (WebAssembly) survive reloads.

Prerendering runs OnInitializedAsync twice; PersistentComponentState passes the first result to the interactive render.

Code example: Avoid loading twice with prerendering#

1@page "/products"
2@rendermode InteractiveServer
3@implements IDisposable
4@inject PersistentComponentState AppState
5@inject IProductService Products
6

7@code {
8    private List<ProductDto>? items;
9    private PersistingComponentStateSubscription subscription;
10

11    protected override async Task OnInitializedAsync()
12    {
13        subscription = AppState.RegisterOnPersisting(() =>
14        {
15            AppState.PersistAsJson("products", items);
16            return Task.CompletedTask;
17        });
18

19        if (!AppState.TryTakeFromJson<List<ProductDto>>("products", out items))
20            items = await Products.GetAllAsync();
21    }
22

23    public void Dispose() => subscription.Dispose();
24}

The products load once during prerendering; the interactive render reuses that data instead of querying the database again.

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. RegisterOnPersisting saves the list into the page during prerendering.
2. On the interactive render, TryTakeFromJson restores it.
3. Only if nothing was persisted does it call the service.
4. The subscription is disposed with the component.

Real-world use case#

Common mistakes#

Best practices#

• Filters and paging in the URL
• Drafts in browser storage
• Shared UI state in a scoped container
• PersistentComponentState with prerendering

Remember this#

Practice exercise#

1@inject ProtectedSessionStorage Session
2// save
3await Session.SetAsync("draft", note);
4// load (in OnAfterRenderAsync)
5var r = await Session.GetAsync<string>("draft");
6note = r.Success ? r.Value : "";

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.