How to Effectively Manage State in Blazor Apps?

Modern web applications often need to preserve data across multiple pages or components. This data is known as state. In Blazor, managing state properly is important for delivering a smooth user experience. Whether it’s keeping a draft blog post, remembering a selected category, or tracking login status, state management helps your app stay consistent and responsive.

What Is State Management?

State is the data your app uses to behave correctly, such as a user’s draft input, login status, or preferences. State management refers to how that data is stored, updated, and shared across components and pages in your Blazor application.

Blog State Example Using Dependency Injection

Step 1: Create a Blog State Service

public class BlogDraftState
{ public BlogPost Draft { get; private set; } = new(); public void UpdateDraft(BlogPost updated) { Draft = updated; } public void Clear() { Draft = new BlogPost(); }
}

Step 2: Register the Service in Program.cs

builder.Services.AddScoped<BlogDraftState>();

Step 3: Use the State Service in CreateBlog.razor

@page "/create-blog"
@inject BlogDraftState DraftState
@inject NavigationManager Navigation
<h3>Create Blog Post (Draft Supported)</h3><EditForm Model="@DraftState.Draft" OnValidSubmit="SavePost"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="mb-3"> <label>Title</label> <InputText class="form-control" @bind-Value="DraftState.Draft.Title" /> </div> <div class="mb-3"> <label>Content</label> <InputTextArea class="form-control" @bind-Value="DraftState.Draft.Content" /> </div> <button class="btn btn-primary">Publish</button></EditForm><button class="btn btn-secondary mt-2" @onclick="@(() => Navigation.NavigateTo("/blogs"))"> Leave and Come Back
</button>@code { void SavePost() { Console.WriteLine($"Saving: {DraftState.Draft.Title}"); DraftState.Clear(); Navigation.NavigateTo("/blogs"); }
}

Conclusion

Blazor makes it easy to manage state using services and dependency injection. This approach helps you keep data available across pages and components, especially in multi-step workflows or draft forms. For more complex scenarios, you can combine this with tools like local storage or external state containers.