Jonathan Kelley
cd54f5953b
* update the dioxus cratesio readme * fix example * fix header * add a bunch more examples
40 lines
1.2 KiB
Rust
40 lines
1.2 KiB
Rust
//! Deriving values with `use_memo`.
|
|
//!
|
|
//! `use_memo` caches the result of a closure and re-runs it only when one of the signals
|
|
//! it reads changes. It's how you compute values derived from state without doing the work
|
|
//! on every render, and without introducing another `use_signal` that you have to keep
|
|
//! in sync manually.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
let mut first = use_signal(|| "Ada".to_string());
|
|
let mut last = use_signal(|| "Lovelace".to_string());
|
|
|
|
// Recomputes only when `first` or `last` change
|
|
let full_name = use_memo(move || format!("{first} {last}"));
|
|
|
|
// Memos compose — derive from other memos or signals
|
|
let initials = use_memo(move || {
|
|
let name = full_name();
|
|
name.split_whitespace()
|
|
.filter_map(|w| w.chars().next())
|
|
.collect::<String>()
|
|
});
|
|
|
|
rsx! {
|
|
h1 { "{full_name}" }
|
|
p { "Initials: {initials}" }
|
|
|
|
label { "First: " }
|
|
input { value: "{first}", oninput: move |e| first.set(e.value()) }
|
|
|
|
label { "Last: " }
|
|
input { value: "{last}", oninput: move |e| last.set(e.value()) }
|
|
}
|
|
}
|