blazor

mindrally

•

6155 months ago

Source Raw

Guidelines for Blazor development including component lifecycle, state management, and performance optimization

Quick Install

npxskills add mindrally/skills--skill blazor

Instructions

Blazor Development Guidelines

You are an expert in Blazor development with deep knowledge of both Blazor Server and Blazor WebAssembly.

Component Architecture

Component Design

Create small, focused components
Use component parameters for input
Use EventCallback for output/events
Implement IDisposable for cleanup
Use cascading parameters sparingly

Component Structure

@page "/users/{Id:int}"
@inject IUserService UserService

<h1>@User?.Name</h1>

@code {
    [Parameter]
    public int Id { get; set; }

    private User? User { get; set; }

    protected override async Task OnInitializedAsync()
    {
        User = await UserService.GetUserAsync(Id);
    }
}

Component Lifecycle

Lifecycle Methods

OnInitialized/OnInitializedAsync: Initial setup
OnParametersSet/OnParametersSetAsync: When parameters change
OnAfterRender/OnAfterRenderAsync: After DOM updates
Dispose: Cleanup resources

Best Practices

Use OnInitializedAsync for data loading
Check firstRender in OnAfterRenderAsync
Dispose subscriptions and timers
Avoid long-running synchronous code

Data Binding

One-Way Binding

<p>@message</p>
<input value="@inputValue" />

Two-Way Binding

<input @bind="inputValue" />
<input @bind="inputValue" @bind:event="oninput" />

Event Handling

<button @onclick="HandleClick">Click</button>
<button @onclick="() => HandleClickWithParam(id)">Click</button>
<button @onclick="HandleClickAsync">Async Click</button>

Render Optimization

Prevent Unnecessary Renders

Use @key for list items
Implement ShouldRender() when appropriate
Use StateHasChanged() judiciously
Avoid inline handlers in loops

Virtualization

<Virtualize Items="@items" Context="item">
    <ItemContent>
        <div>@item.Name</div>
    </ItemContent>
</Virtualize>

State Management

Component State

Use private fields for component state
Call StateHasChanged() when state changes externally
Use InvokeAsync for thread-safe updates

Cascading Parameters

<CascadingValue Value="@currentTheme">
    <ChildComponent />
</CascadingValue>

<!-- In child component -->
[CascadingParameter]
public Theme CurrentTheme { get; set; }

State Containers

Create injectable state services
Use events for state change notifications
Consider Fluxor for complex state management

Blazor Server vs WebAssembly

Blazor Server

State lives on server
Real-time connection via SignalR
Faster initial load
Requires stable connection
Better for internal apps

Blazor WebAssembly

Runs entirely in browser
Larger initial download
Works offline (PWA capable)
No server resources per user
Better for public apps

API Integration

HTTP Client

@inject HttpClient Http

private async Task LoadData()
{
    users = await Http.GetFromJsonAsync<List<User>>("api/users");
}

Error Handling

try
{
    users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
catch (HttpRequestException ex)
{
    errorMessage = "Failed to load users";
}

Error Handling

Error Boundaries

<ErrorBoundary>
    <ChildContent>
        <RiskyComponent />
    </ChildContent>
    <ErrorContent Context="ex">
        <p>An error occurred: @ex.Message</p>
    </ErrorContent>
</ErrorBoundary>

Global Error Handling

Implement IErrorBoundary for custom handling
Log errors to server
Show user-friendly messages

Testing

bUnit Testing

[Fact]
public void ComponentRendersCorrectly()
{
    using var ctx = new TestContext();
    var cut = ctx.RenderComponent<Counter>();

    cut.Find("p").MarkupMatches("<p>Current count: 0</p>");
    cut.Find("button").Click();
    cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}

Authentication

Setup

Use AuthenticationStateProvider
Use AuthorizeView for conditional UI
Use [Authorize] attribute on pages
Implement custom auth state provider for JWT

AuthorizeView

<AuthorizeView>
    <Authorized>
        <p>Welcome, @context.User.Identity?.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>Please log in.</p>
    </NotAuthorized>
</AuthorizeView>

Performance Tips

Use @key for dynamic lists
Implement virtualization for large lists
Lazy load components with @if
Minimize JavaScript interop calls
Use streaming rendering in .NET 8+

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885

Blazor Development Guidelines

You are an expert in Blazor development with deep knowledge of both Blazor Server and Blazor WebAssembly.

Component Architecture

Component Design

Create small, focused components
Use component parameters for input
Use EventCallback for output/events
Implement IDisposable for cleanup
Use cascading parameters sparingly

Component Structure

@page "/users/{Id:int}"
@inject IUserService UserService

<h1>@User?.Name</h1>

@code {
    [Parameter]
    public int Id { get; set; }

    private User? User { get; set; }

    protected override async Task OnInitializedAsync()
    {
        User = await UserService.GetUserAsync(Id);
    }
}

Component Lifecycle

Lifecycle Methods

OnInitialized/OnInitializedAsync: Initial setup
OnParametersSet/OnParametersSetAsync: When parameters change
OnAfterRender/OnAfterRenderAsync: After DOM updates
Dispose: Cleanup resources

Best Practices

Use OnInitializedAsync for data loading
Check firstRender in OnAfterRenderAsync
Dispose subscriptions and timers
Avoid long-running synchronous code

Data Binding

One-Way Binding

<p>@message</p>
<input value="@inputValue" />

Two-Way Binding

<input @bind="inputValue" />
<input @bind="inputValue" @bind:event="oninput" />

Event Handling

<button @onclick="HandleClick">Click</button>
<button @onclick="() => HandleClickWithParam(id)">Click</button>
<button @onclick="HandleClickAsync">Async Click</button>

Render Optimization

Prevent Unnecessary Renders

Use @key for list items
Implement ShouldRender() when appropriate
Use StateHasChanged() judiciously
Avoid inline handlers in loops

Virtualization

<Virtualize Items="@items" Context="item">
    <ItemContent>
        <div>@item.Name</div>
    </ItemContent>
</Virtualize>

State Management

Component State

Use private fields for component state
Call StateHasChanged() when state changes externally
Use InvokeAsync for thread-safe updates

Cascading Parameters

<CascadingValue Value="@currentTheme">
    <ChildComponent />
</CascadingValue>

<!-- In child component -->
[CascadingParameter]
public Theme CurrentTheme { get; set; }

State Containers

Create injectable state services
Use events for state change notifications
Consider Fluxor for complex state management

Blazor Server vs WebAssembly

Blazor Server

State lives on server
Real-time connection via SignalR
Faster initial load
Requires stable connection
Better for internal apps

Blazor WebAssembly

Runs entirely in browser
Larger initial download
Works offline (PWA capable)
No server resources per user
Better for public apps

API Integration

HTTP Client

@inject HttpClient Http

private async Task LoadData()
{
    users = await Http.GetFromJsonAsync<List<User>>("api/users");
}

Error Handling

try
{
    users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
catch (HttpRequestException ex)
{
    errorMessage = "Failed to load users";
}

Error Handling

Error Boundaries

<ErrorBoundary>
    <ChildContent>
        <RiskyComponent />
    </ChildContent>
    <ErrorContent Context="ex">
        <p>An error occurred: @ex.Message</p>
    </ErrorContent>
</ErrorBoundary>

Global Error Handling

Implement IErrorBoundary for custom handling
Log errors to server
Show user-friendly messages

Testing

bUnit Testing

[Fact]
public void ComponentRendersCorrectly()
{
    using var ctx = new TestContext();
    var cut = ctx.RenderComponent<Counter>();

    cut.Find("p").MarkupMatches("<p>Current count: 0</p>");
    cut.Find("button").Click();
    cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}

Authentication

Setup

Use AuthenticationStateProvider
Use AuthorizeView for conditional UI
Use [Authorize] attribute on pages
Implement custom auth state provider for JWT

AuthorizeView

<AuthorizeView>
    <Authorized>
        <p>Welcome, @context.User.Identity?.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>Please log in.</p>
    </NotAuthorized>
</AuthorizeView>

Performance Tips

Use @key for dynamic lists
Implement virtualization for large lists
Lazy load components with @if
Minimize JavaScript interop calls
Use streaming rendering in .NET 8+