skills.rest
wubing7755
wubing7755COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ada-blazor-interaction-pitfalls

Diagnose Blazor WASM lifecycle and rendering bugs with verified fix patterns.

Updated Jul 23, 2026
Search Tags:#debugging#rendering#lifecycle#wasm#blazor#razor#statehaschanged
One-click install
npx skills add https://github.com/wubing7755/Ada --skill ada-blazor-interaction-pitfalls-wubing7755
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ada-blazor-interaction-pitfalls
Source: https://github.com/wubing7755/Ada/tree/main/skills/software-development/ada-blazor-interaction-pitfalls
Command: npx skills add https://github.com/wubing7755/Ada --skill ada-blazor-interaction-pitfalls-wubing7755

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Blazor WASM components fail silently in hard-to-trace ways: StateHasChanged skips OnParametersSet, @ref breaks inside RenderFragment, OnAfterRender ordering traps, paired lists throw IndexOutOfRange, and SetKey sibling swaps drop attributes in real browsers. This Skill catalogs these lifecycle and rendering pitfalls with root causes and verified fixes. ## Core Features & Use Cases - Lifecycle Diagnosis: Classify issues across StateHasChanged, ShouldRender, OnParametersSet, and OnAfterRender/OnAfterRenderAsync ordering, with fixes like per-render state reset in ShouldRender. - Rendering Pitfall Fixes: Resolve @ref-in-RenderFragment failures, paired-list IndexOutOfRange via Math.Min defensive iteration, and SetKey sibling-swap attribute loss that bUnit cannot reproduce. - Verification Guidance: Distinguish bugs bUnit/AngleSharp can catch from real-browser-only DOM application failures, with a checklist for JS errors, DotNetObjectReference leaks, and drag-and-drop regressions. - Use Case: A toolbar component throws IndexOutOfRange after StateHasChanged because _renderIndex reset lives in OnParametersSet; the Skill identifies the lifecycle gap and moves the reset into ShouldRender with a regression test. ## Quick Start Ask the agent to diagnose why your Blazor component's StateHasChanged call causes stale render state or an IndexOutOfRange, and apply the matching pitfall fix.

Frequently Asked Questions about ada-blazor-interaction-pitfalls

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does StateHasChanged not call OnParametersSet in Blazor?▼

OnParametersSet only runs when the parent passes parameters; StateHasChanged triggered internally skips it. Move per-render state resets like index counters into ShouldRender, which fires before every BuildRenderTree regardless of trigger.

How do I fix @ref not working inside a RenderFragment?▼

@ref only binds in .razor templates, not inside __builder lambdas or extracted RenderFragment helper methods. Keep @ref assignments inline in the template and extract only display-only content to helpers.

Why does my Blazor component throw IndexOutOfRange after re-render?▼

Paired List<T> fields assumed to have equal Count can diverge across renders due to lifecycle timing. Iterate with Math.Min of both counts, or replace mutable per-render counters with a precomputed Dictionary lookup built in OnParametersSet.

Can bUnit catch all Blazor rendering bugs?▼

No. bUnit's AngleSharp DOM applies incremental diffs differently than real browsers, so failures like SetKey sibling-swap attribute loss pass in bUnit but break in production. Verify reorder and drag paths in a real browser.

When should I use OnAfterRender versus OnAfterRenderAsync?▼

Blazor runs all sync OnAfterRender methods parent-first, then all async OnAfterRenderAsync methods parent-first. Keep ElementReference registration in sync OnAfterRender and JS interop registration in OnAfterRenderAsync with a string-identity guard.

When should I not use this Blazor lifecycle skill?▼

Do not use it for JS interop event handling like @onmouseenter failures, which route to the interop pitfalls skill, or for broad component library audits and simple compile errors, which are outside lifecycle diagnosis scope.

Related Skills

Explore More Software Engineering Skills→
ecoDriverltdecoDriverltd

author-component

Create and review Blazor .razor components with correct parameters, lifecycle, and async patterns.

Official
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-test-dragdrop

Detect broken drag-and-drop reordering in interactive interfaces.

Community
Advanced
ecoDriverltdecoDriverltd

use-js-interop

Implements and reviews JavaScript interop patterns in Blazor components.

Official
Intermediate
asarchamiasarchami
1

python-pre-mortem

Writes realistic post-mortem reports for plausible future bugs in Python code.

Community
Intermediate