Intro to Dioxus 0.7

Step 4 / 6

Async with Resources

Use use_resource to run async code that depends on reactive state. The resource automatically re-runs when its dependencies change.

src/main.rs

#[component]
fn CatFact() -> Element {
    let fact = use_resource(|| async move {
        let resp = reqwest::get("https://catfact.ninja/fact")
            .await
            .ok()?;
        resp.text().await.ok()
    });

    match fact() {
        Some(Some(text)) => rsx! { p { "{text}" } },
        _ => rsx! { p { "Loading..." } },
    }
}

Step 4 / 6

◀ Prev Next ▶