Blazor Component Architecture Patterns

What this prompt does

This prompt designs a Blazor component architecture for an [application_type] using a given [blazor_mode]. It structures the [page_name] page with a layout and [child_count] child components, assigns render modes across [render_scenarios], implements [state_approach] for shared state, and builds a [reusable_component] around Parameters, EventCallbacks, and RenderFragments. It also covers cascading values for [cascading_data], EditForm validation with [form_library], lifecycle hooks for [lifecycle_tasks], and JS interop for [js_requirement].

The structure works because render modes are where most Blazor apps go wrong. The prompt is deliberate about which components get Static SSR versus Interactive Server or WebAssembly, since picking wrong tanks either performance or interactivity. Building components around Parameters, EventCallbacks, and RenderFragments is the habit that actually makes them reusable across a real project, and the lifecycle step pins down which hook — OnInitialized, OnParametersSet, or OnAfterRender — belongs to each task.

When to use it

• You are starting a Blazor app and need a component hierarchy for [page_name] planned before coding
• You are unsure which render mode fits each component across [render_scenarios]
• You need a shared-state pattern via [state_approach] with proper change notification
• You want a genuinely reusable [reusable_component] built on Parameters, EventCallbacks, and RenderFragments
• You need EditForm validation wired with [form_library] and custom inputs for [custom_inputs]
• You need JS interop for [js_requirement] with correct disposal

Example output

Expect an architecture plan and code: a component tree for the page with defined data flow, a render-mode assignment per component with rationale, state-service registration and change-notification code, a reusable component exposing Parameters, EventCallbacks, and RenderFragments, cascading-value setup, an EditForm-based form with validation and custom inputs, lifecycle-hook guidance per task, and JS interop using IJSRuntime with disposal handled.

Pro tips

• Be explicit in [render_scenarios] — static list pages should stay Static SSR while interactive search needs Interactive Server or WebAssembly, and naming each one guides the right call
• Design the [reusable_component] around RenderFragments early; passing markup in is what lets one component serve many layouts instead of forking it
• Pick [state_approach] to match complexity — a simple scoped service is often enough, and a full Redux-style library can be overkill for a small app
• Use the correct lifecycle hook for each [lifecycle_tasks] item; initializing JS charts belongs in OnAfterRender, not OnInitialized, or the DOM won't exist yet
• Always implement IAsyncDisposable for JS interop in [js_requirement] to avoid leaking object references
• Verify EventCallback signatures flow data upward cleanly, since broken callbacks are a common reason "reusable" components stop being reusable
• Centralize shared state through [state_approach] and notify with an event so child components re-render, rather than passing state down through many layers of parameters
• Use CascadingValue for [cascading_data] like theme and user context that many components need, but avoid overusing it for data that only one branch consumes