search
menu
Dioxus 0.5.7MigrationHooks
You are currently viewing the docs for Dioxus 0.5.7 which is no longer maintained.

Hooks

Dioxus now uses signals as the backing for its state management. Signals are a smarter, more flexible version of the use_ref hook. Signals now back many hooks in dioxus to provide a more consistent and flexible API.

State Hooks

State hooks are now backed by signals. use_state, use_ref, and use_shared_state have been replaced with the use_signal hook. The use_signal hook is a more flexible and powerful version of the use_ref hook with smarter scopes that only subscribe to a signal if that signal is read within the scope. You can read more about the use_signal hook in the State Migration guide.

Async Hooks

The use_future hook has been replaced with the use_resource hook. use_resource automatically subscribes to any signals that are read within the closure instead of using a tuple of dependencies.

Dioxus 0.4:

fn MyComponent(cx: Scope) -> Element {
	let state = use_state(cx, || 0);
	let my_resource = use_future(cx, (**state,), |(state,)| async move {
		// start a request that depends on the state
		println!("{state}");
	});
	render! {
		"{state}"
	}
}

Dioxus 0.5:

src/migration_hooks.rs
fn MyComponent() -> Element {
    let state = use_signal(|| 0);
    // No need to manually set the dependencies, the use_resource hook will automatically detect signal dependencies
    let my_resource = use_resource(move || async move {
        // start a request that depends on the state
        // Because we read from the state signal, this future will be re-run whenever the state changes
        println!("{state}");
    });
    rsx! {"{state}"}
}

Dependencies

Some hooks including use_effect and use_resource now take a single closure with automatic subscriptions instead of a tuple of dependencies. You can read more about the use_resource hook in the Hook Migration guide.

Dioxus 0.4:

fn HasDependencies(cx: Scope) -> Element {
	let state = use_state(cx, || 0);
	let my_resource = use_resource(cx, (**state,), |(state,)| async move {
		println!("{state}");
	});
	let state_plus_one = use_memo(cx, (**state,), |(state,)| {
		state() + 1
	});
	render! {
		"{state_plus_one}"
	}
}

Dioxus 0.5:

src/migration_hooks.rs
fn HasDependencies() -> Element {
    let state = use_signal(|| 0);
    // No need to manually set the dependencies, the use_resource hook will automatically detect signal dependencies
    let my_resource = use_resource(move || async move {
        // Because we read from the state signal, this future will be re-run whenever the state changes
        println!("{state}");
    });
    let state_plus_one = use_memo(move || {
        // Because we read from the state signal, this future will be re-run whenever the state changes
        state() + 1
    });
    rsx! {"{state_plus_one}"}
}
PREVIOUSMigration
NEXTState