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:
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:
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}"}
}