Skip to content

Commit

Permalink
nonreactive examples for hooks were not compilable as written (#2337)
Browse files Browse the repository at this point in the history
* nonreactive examples for hooks were not compilable as written

* add example demonstrating the correct usage of use_resource w router

* switch to readonlysignal in the router resource example

* fix readonlysignal name

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
  • Loading branch information
rogusdev and ealmloff committed Jun 18, 2024
1 parent 6320e00 commit 7ee3dc4
Showing 1 changed file with 65 additions and 0 deletions.
65 changes: 65 additions & 0 deletions examples/router_resource.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
//! Example: Updating components with use_resource
//! -----------------
//!
//! This example shows how to use use_reactive to update a component properly
//! when linking to it from the same component, when using use_resource

use dioxus::prelude::*;

#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
#[route("/")]
Home {},
#[route("/blog/:id")]
Blog { id: i32 },
}

fn main() {
launch(App);
}

#[component]
fn App() -> Element {
rsx! {
Router::<Route> {}
}
}

#[component]
fn Blog(id: ReadOnlySignal<i32>) -> Element {
async fn future(n: i32) -> i32 {
n
}

// if you use the naive approach, the "Blog post {id}" below will never update when clicking links!
// let res = use_resource(move || future(id));

// the use_reactive hook is required to properly update when clicking links to this component, from this component
let res = use_resource(move || future(id()));

match res() {
Some(id) => rsx! {
div {
"Blog post {id}"
}
for i in 0..10 {
div {
Link { to: Route::Blog { id: i }, "Go to Blog {i}" }
}
}
},
None => rsx! {},
}
}

#[component]
fn Home() -> Element {
rsx! {
Link {
to: Route::Blog {
id: 0
},
"Go to blog"
}
}
}

0 comments on commit 7ee3dc4

Please sign in to comment.