Dioxus 0.5+ Knowledge Patch

Claude's baseline knowledge covers Dioxus through 0.4.x. This skill provides features from 0.5 (2024) onwards.

Quick Reference

Component Syntax (0.5+)

Old (0.4) New (0.5+)

fn App(cx: Scope) -> Element

fn App() -> Element

cx.use_hook()

use_signal() , use_memo()

use_state , use_ref

Signal<T> (always Copy)

Per-platform launchers dioxus::launch(App)

Signals

Operation Syntax

Create let count = use_signal(|| 0);

Read (subscribes) count.read() or count()

Read (no subscribe) count.peek()

Write count.write() , count.set(5) , count += 1

Global static THEME: GlobalSignal<T> = GlobalSignal::new(|| ...)

Mapped user.map(|u| &u.name)

See references/signals-hooks.md for hooks, effects, resources, coroutines.

RSX Syntax

Pattern Example

Conditional if show { Header {} }

Conditional attr class: if active { "active" }

List with key for item in items { li { key: "{item.id}", ... } }

Children prop fn Card(children: Element) -> Element

Optional prop #[props(default)] disabled: bool

Prop into #[props(into)] id: String

See references/rsx-patterns.md for attributes, events, prop spreading.

Assets (0.6+)

const LOGO: Asset = asset!("/assets/logo.png"); const HERO: Asset = asset!("/hero.png", ImageAssetOptions::new() .format(ImageFormat::Avif).preload(true)); const STYLES: Asset = asset!("/app.css", CssAssetOptions::new().minify(true));

Server Functions (0.7+)

Feature Syntax

Basic #[server] async fn get_data() -> Result<T>

Route params #[get("/api/users/{id}")] async fn get_user(id: u32)

Query params #[get("/search?query")] async fn search(query: String)

Middleware #[server] #[middleware(AuthLayer)]

Extractors async fn auth(headers: HeaderMap, cookies: Cookies)

See references/fullstack.md for WebSocket, SSR, streaming, server config.

Router

#[derive(Routable, Clone, PartialEq)] enum Route { #[route("/")] Home {}, #[route("/user/:id")] User { id: u32 }, #[route("/files/:..path")] // Catch-all Files { path: Vec<String> }, }

See references/router.md for layouts, navigation, nested routes.

CLI Commands

Command Purpose

dx serve

Dev server with hot-reload

dx serve --platform ios

iOS simulator

dx build --release

Production build

dx bundle

Package for distribution

dx serve --wasm-split

Route-based code splitting

See references/cli-desktop.md for desktop config, platform args.

Reference Files

File Contents

signals-hooks.md

Signals, use_memo, use_effect, use_resource, context

rsx-patterns.md

RSX syntax, props, events, conditionals, lists

fullstack.md

Server functions, SSR, WebSocket, extractors

router.md

Routes, layouts, navigation, parameters

cli-desktop.md

CLI commands, desktop config, platforms

Critical Knowledge

Element is Result (0.6+)

Use ? anywhere - propagates to ErrorBoundary:

#[component] fn Profile(id: u32) -> Element { let user = get_user(id)?; // Early return on error rsx! { "{user.name}" } }

Suspense for Async

rsx! { SuspenseBoundary { fallback: |_| rsx! { "Loading..." }, AsyncChild {} } }

fn AsyncChild() -> Element { let data = use_resource(fetch_data).suspend()?; rsx! { "{data}" } }

Document Head

use dioxus::document::{Title, Link, Meta};

rsx! { Title { "My Page" } Meta { name: "description", content: "..." } Link { rel: "stylesheet", href: asset!("/style.css") } }

Stores for Nested State (0.7+)

#[derive(Store)] struct AppState { users: BTreeMap<String, User>, }

#[component] fn UserList(state: Store<AppState>) -> Element { let users = state.users(); rsx! { for (id, user) in users.iter() { UserRow { key: "{id}", user } // Only changed items re-render } } }

CSS Modules (0.7.3+)

css_module!(Styles = "/styles.module.css", AssetOptions::css_module());

rsx! { div { class: Styles::container, // Typed, compile-checked p { class: Styles::title, "Hello" } } }

Fullstack Server Setup

use axum::Router; use dioxus::prelude::*;

#[tokio::main] async fn main() { let app = Router::new() .serve_static_assets("dist") .serve_dioxus_application(ServeConfig::new(), App);

let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
axum::serve(listener, app).await.unwrap();

}

Reactivity Gotchas

Memos in attributes don't subscribe properly:

// BAD: Won't update let style = use_memo(move || format!("color: {}", color())); rsx! { div { style: style } }

// GOOD: Direct signal read rsx! { div { style: format!("color: {}", color()) } }

Use individual CSS properties:

// GOOD: Proper reactivity rsx! { p { font_weight: if bold() { "bold" } else { "normal" }, text_align: "{align}", } }

Hot-Reload Boundaries

Instant reload: Literal values, text, formatted segments, attribute order, template structure

Requires rebuild: Rust logic, component structure, control flow conditions, struct field changes