freya/_docs/state_management/
signals.rs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//! # Signals
//!
//! [Signals](dioxus::prelude::Signal) are a state management solution built-in into Dioxus.
//!
//! They allow us to store values so that components can **read and subscribe** to any change done to the stored value.
//!
//! Signals can even be read and mutated from multiple components.
//!
//! They are usually created by using the [`use_signal`](dioxus::prelude::use_signal) hook.
//!
//! ### Example
//!
//! ```rust
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     // The closure passed to `use_signal` will be called only
//!     // the first time this component renders,
//!     // it will return the initial value for the Signal.
//!     // This closure is to prevent having to create the initial value
//!     // every time the component runs again, as it is only needed the first time.
//!     let mut count = use_signal(|| 0);
//!
//!     let onclick = move |_| {
//!         count += 1; // Shorthand for count.write() += 1;
//!         // The moment the signal is mutated, it will notify
//!         // all the components that have a read subscription
//!         // to this signal (in this case, only `app`)
//!         // that there has been a change.
//!         // When that happens these components will render again
//!         // so that an updated UI is produced and ultimately presented to the user.
//!     };
//!
//!     rsx!(
//!         label {
//!             onclick,
//!             "{count}"
//!             // By embedding the `count` signal in here, we are effectively
//!             // creating a read subscription. It is the same as if was doing `"{count.read()}"`.
//!         }
//!     )
//! }
//! ```
//!
//! #### You can now learn about [Global Signals](crate::_docs::state_management::global_signals).