Introduce use_future_with_deps

packages/yew/src/suspense/hooks.rs

@@ -1,6 +1,7 @@
 #[cfg_attr(documenting, doc(cfg(any(target_arch = "wasm32", feature = "tokio"))))]
 #[cfg(any(target_arch = "wasm32", feature = "tokio"))]
 mod feat_futures {
+    use std::cell::Cell;
     use std::fmt;
     use std::future::Future;
     use std::ops::Deref;
@@ -60,6 +61,46 @@ mod feat_futures {
             Err((*suspension).clone())
         }
     }
+
+    #[hook]
+    pub fn use_future_with_deps<F, D, T, O>(f: F, deps: D) -> SuspensionResult<UseFutureHandle<O>>
+    where
+        F: FnOnce(&D) -> T + 'static,
+        T: Future<Output = O> + 'static,
+        O: 'static,
+        D: PartialEq + 'static,
+    {
+        let output = use_state(|| None);
+        // We only commit a result if it comes from the latest spawned future. Otherwise, this
+        // might trigger pointless updates or even override newer state.
+        let latest_id = use_state(|| Cell::new(0u32));
+
+        let suspension = {
+            let output = output.clone();
+
+            use_memo(
+                move |deps| {
+                    let self_id = latest_id.get().wrapping_add(1);
+                    // As long as less than 2**32 futures are in flight wrapping_add is fine
+                    (*latest_id).set(self_id);
+                    let task = f(deps);
+                    Suspension::from_future(async move {
+                        let result = task.await;
+                        if latest_id.get() == self_id {
+                            output.set(Some(result));
+                        }
+                    })
+                },
+                deps,
+            )
+        };
+
+        if suspension.resumed() {
+            Ok(UseFutureHandle { inner: output })
+        } else {
+            Err((*suspension).clone())
+        }
+    }
 }
 
 #[cfg(any(target_arch = "wasm32", feature = "tokio"))]

packages/yew/tests/suspense.rs

@@ -15,7 +15,7 @@ use gloo::timers::future::TimeoutFuture;
 use wasm_bindgen::JsCast;
 use wasm_bindgen_futures::spawn_local;
 use web_sys::{HtmlElement, HtmlTextAreaElement};
-use yew::suspense::{use_future, Suspension, SuspensionResult};
+use yew::suspense::{use_future, use_future_with_deps, Suspension, SuspensionResult};
 
 #[wasm_bindgen_test]
 async fn suspense_works() {
@@ -634,3 +634,53 @@ async fn use_suspending_future_works() {
     let result = obtain_result();
     assert_eq!(result.as_str(), r#"<div>Content</div>"#);
 }
+
+#[wasm_bindgen_test]
+async fn use_suspending_future_with_deps_works() {
+    #[derive(PartialEq, Properties)]
+    struct ContentProps {
+        result: u32,
+    }
+
+    #[function_component(Content)]
+    fn content(ContentProps { result }: &ContentProps) -> HtmlResult {
+        let delayed_result = use_future_with_deps(
+            |&result| async move {
+                TimeoutFuture::new(50).await;
+                result
+            },
+            *result,
+        )?;
+
+        Ok(html! {
+            <div>
+                {*delayed_result}
+            </div>
+        })
+    }
+
+    #[function_component(App)]
+    fn app() -> Html {
+        let fallback = html! {<div>{"wait..."}</div>};
+
+        html! {
+            <div id="result">
+                <Suspense {fallback}>
+                    <Content result={42} />
+                </Suspense>
+            </div>
+        }
+    }
+
+    yew::Renderer::<App>::with_root(gloo_utils::document().get_element_by_id("output").unwrap())
+        .render();
+
+    TimeoutFuture::new(10).await;
+    let result = obtain_result();
+    assert_eq!(result.as_str(), "<div>wait...</div>");
+
+    TimeoutFuture::new(50).await;
+
+    let result = obtain_result();
+    assert_eq!(result.as_str(), r#"<div>42</div>"#);
+}