dioxus-knowledge-patch_skill

Overview

This skill provides up-to-date Dioxus knowledge for versions 0.5 and later, covering component syntax changes, signals, RSX patterns, assets, server functions, routing, and CLI usage. It fills gaps introduced after the baseline Dioxus 0.4.x knowledge and highlights critical reactivity and runtime behaviors. Use it as a compact reference when writing modern Dioxus apps across web, desktop, and mobile.

How this skill works

The skill summarizes new APIs and idioms: function-style components, the Signal API, RSX conditional/list/prop patterns, asset declarations, server function attributes, Routable enums, and CLI commands. It calls out important runtime features such as Element-as-Result (error propagation), Suspense with resources, document head components, stores for nested state, and CSS module usage. It also documents reactivity gotchas and hot-reload boundaries so you can avoid subtle bugs and optimize developer workflow.

When to use it

• When upgrading code from Dioxus 0.4.x to 0.5+ to adjust component and hook patterns.
• When implementing reactive state using Signal, GlobalSignal, use_memo, or use_resource.
• When writing RSX with conditionals, keyed lists, props, or typed CSS modules.
• When building fullstack features: server functions, extractors, SSR, or WebSockets.
• When configuring assets, bundling, or using dx CLI commands for serve/build.

Best practices

• Prefer function components without an explicit cx parameter for 0.5+ style.
• Use Signal.read()/() for reactive reads and peek() for non-subscribing reads.
• Use key on list items and Stores for deeply nested state to limit re-renders.
• Avoid placing use_memo values directly into attributes if they need to subscribe.
• Leverage Element-as-Result and ? inside components to propagate errors to ErrorBoundary.

Example use cases

• Convert old use_state/use_ref hooks to Signal<T> and update read/write patterns.
• Implement server functions with #[server] and route/query extractors for fullstack endpoints.
• Create SuspenseBoundary with use_resource to suspend rendering until async data is ready.
• Declare assets with asset!() for images and CSS and enable preloading or minification options.
• Define Routable enums for client navigation including catch-all routes and nested params.