2023-08-08 00:49:14 +00:00
# Dioxus Signals
2023-08-08 20:27:45 +00:00
Dioxus Signals is an ergonomic Copy runtime for data with local subscriptions.
2023-08-08 00:49:14 +00:00
## Copy Data
All signals implement Copy, even if the inner value does not implement copy. This makes it easy to move any data into futures or children.
```rust
2023-08-08 18:12:08 +00:00
use dioxus::prelude::*;
use dioxus_signals::*;
2023-09-15 14:13:36 +00:00
#[component]
2024-01-14 04:51:37 +00:00
fn App() -> Element {
let signal = use_signal(|| "hello world".to_string());
2023-08-08 00:49:14 +00:00
spawn(async move {
// signal is Copy even though String is not copy
2023-08-08 18:12:08 +00:00
print!("{signal}");
2023-08-08 00:49:14 +00:00
});
2024-01-16 19:18:46 +00:00
rsx! {
2023-08-08 00:49:14 +00:00
"{signal}"
}
}
```
## Local Subscriptions
Signals will only subscribe to components when you read from the signal in that component. It will never subscribe to a component when reading data in a future or event handler.
```rust
2023-08-08 18:12:08 +00:00
use dioxus::prelude::*;
use dioxus_signals::*;
2023-09-15 14:13:36 +00:00
#[component]
2024-01-14 04:51:37 +00:00
fn App() -> Element {
2023-08-08 00:49:14 +00:00
// Because signal is never read in this component, this component will not rerun when the signal changes
2024-03-04 22:02:19 +00:00
let mut signal = use_signal(|| 0);
2023-08-08 00:49:14 +00:00
2024-01-16 19:18:46 +00:00
rsx! {
2023-08-08 18:12:08 +00:00
button {
onclick: move |_| {
2024-03-04 22:02:19 +00:00
signal += 1;
2023-08-08 18:12:08 +00:00
},
"Increase"
2023-08-08 00:49:14 +00:00
}
for id in 0..10 {
Child {
2024-03-04 22:02:19 +00:00
signal,
2023-08-08 00:49:14 +00:00
}
}
}
}
#[derive(Props, Clone, PartialEq)]
struct ChildProps {
signal: Signal< usize > ,
}
2024-03-04 22:02:19 +00:00
fn Child(props: ChildProps) -> Element {
2023-08-08 00:49:14 +00:00
// This component does read from the signal, so when the signal changes it will rerun
2024-01-16 19:18:46 +00:00
rsx! {
2024-03-04 22:02:19 +00:00
"{props.signal}"
2023-08-08 00:49:14 +00:00
}
}
```
2023-08-08 01:20:03 +00:00
Because subscriptions happen when you read from (not create) the data, you can provide signals through the normal context API:
```rust
2023-08-08 18:12:08 +00:00
use dioxus::prelude::*;
use dioxus_signals::*;
2023-09-15 14:13:36 +00:00
#[component]
2024-01-14 04:51:37 +00:00
fn App() -> Element {
2023-08-08 01:20:03 +00:00
// Because signal is never read in this component, this component will not rerun when the signal changes
2024-01-14 04:51:37 +00:00
use_context_provider(|| Signal::new(0));
2024-01-16 19:18:46 +00:00
rsx! {
2023-08-08 01:20:03 +00:00
Child {}
}
}
2023-09-15 14:13:36 +00:00
#[component]
2024-01-14 04:51:37 +00:00
fn Child() -> Element {
2024-03-04 22:02:19 +00:00
let signal: Signal< i32 > = use_context();
2023-08-08 01:20:03 +00:00
// This component does read from the signal, so when the signal changes it will rerun
2024-01-16 19:18:46 +00:00
rsx! {
2023-08-08 01:20:03 +00:00
"{signal}"
}
}
2023-08-08 20:27:45 +00:00
```
## Computed Data
In addition to local subscriptions in components, `dioxus-signals` provides a way to derive data with local subscriptions.
2024-01-21 07:32:12 +00:00
The use_memo hook will only rerun when any signals inside the hook change:
2023-08-08 20:27:45 +00:00
```rust
use dioxus::prelude::*;
use dioxus_signals::*;
2023-09-15 14:13:36 +00:00
#[component]
2024-01-14 04:51:37 +00:00
fn App() -> Element {
2024-03-04 22:02:19 +00:00
let mut signal = use_signal(|| 0);
let doubled = use_memo(move || signal * 2);
2023-08-08 01:20:03 +00:00
2024-01-16 19:18:46 +00:00
rsx! {
2023-08-08 20:27:45 +00:00
button {
2024-03-04 22:02:19 +00:00
onclick: move |_| signal += 1,
2023-08-08 20:27:45 +00:00
"Increase"
}
Child {
2023-10-11 17:43:22 +00:00
signal: doubled
2023-08-08 20:27:45 +00:00
}
}
}
2023-09-15 14:13:36 +00:00
#[component]
2024-01-14 04:51:37 +00:00
fn Child(signal: ReadOnlySignal< usize > ) -> Element {
2024-01-16 19:18:46 +00:00
rsx! {
2023-08-08 20:27:45 +00:00
"{signal}"
}
}
2023-08-08 01:20:03 +00:00
```