Add use_throttle_effect (#7)

Author: jetli

README.md

@@ -98,6 +98,7 @@ fn counter() -> Html {
 - `use_debounce` - debounces a function.
 - `use_debounce_effect` - debounces an effect.
 - `use_throttle` - throttles a function.
+- `use_throttle_effect` - throttles an effect.
 
 ### Lifecycles
 

crates/yew-hooks/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "yew-hooks"
-version = "0.1.51"
+version = "0.1.52"
 edition = "2018"
 authors = ["Jet Li <[email protected]>"]
 categories = ["gui", "wasm", "web-programming"]

crates/yew-hooks/src/hooks/mod.rs

@@ -39,6 +39,7 @@ mod use_size;
 mod use_state_ptr_eq;
 mod use_swipe;
 mod use_throttle;
+mod use_throttle_effect;
 mod use_throttle_state;
 mod use_timeout;
 mod use_title;
@@ -90,6 +91,7 @@ pub use use_size::*;
 pub use use_state_ptr_eq::*;
 pub use use_swipe::*;
 pub use use_throttle::*;
+pub use use_throttle_effect::*;
 pub use use_throttle_state::*;
 pub use use_timeout::*;
 pub use use_title::*;

crates/yew-hooks/src/hooks/use_throttle_effect.rs

@@ -0,0 +1,88 @@
+use yew::prelude::*;
+
+use super::{use_throttle, use_unmount};
+
+/// A hook that throttles calling effect callback, it is only called once every `millis`.
+///
+/// # Example
+///
+/// ```rust
+/// # use yew::prelude::*;
+/// #
+/// use yew_hooks::{use_throttle_effect, use_update};
+///
+/// #[function_component(ThrottleEffect)]
+/// fn throttle_effect() -> Html {
+///     let state = use_state(|| 0);
+///     let update = use_update();
+///
+///     {
+///         let state = state.clone();
+///         use_throttle_effect(
+///             move || {
+///                 state.set(*state + 1);
+///             },
+///             2000,
+///         )
+///     };
+///
+///     let onclick = { Callback::from(move |_| update()) };
+///
+///     html! {
+///         <>
+///             <button {onclick}>{ "Click fast!" }</button>
+///             <b>{ "State: " }</b> {*state}
+///         </>
+///     }
+/// }
+/// ```
+pub fn use_throttle_effect<Callback>(callback: Callback, millis: u32)
+where
+    Callback: FnMut() + 'static,
+{
+    let throttle = use_throttle(callback, millis);
+
+    {
+        let throttle = throttle.clone();
+        use_effect(move || {
+            throttle.run();
+
+            || ()
+        });
+    }
+
+    use_unmount(move || {
+        throttle.cancel();
+    });
+}
+
+/// This hook is similar to [`use_throttle_effect`] but it accepts dependencies.
+///
+/// Whenever the dependencies are changed, the throttle effect is run again.
+/// To detect changes, dependencies must implement `PartialEq`.
+pub fn use_throttle_effect_with_deps<Callback, Dependents>(
+    callback: Callback,
+    millis: u32,
+    deps: Dependents,
+) where
+    Callback: FnMut() + 'static,
+    Dependents: PartialEq + 'static,
+{
+    let throttle = use_throttle(callback, millis);
+
+    {
+        let throttle = throttle.clone();
+        use_effect_with_deps(
+            move |_| {
+                throttle.run();
+
+                || ()
+            },
+            deps,
+        );
+    }
+
+    use_unmount(move || {
+        throttle.cancel();
+    });
+}

examples/yew-app/src/routes/home.rs

@@ -44,6 +44,7 @@ pub fn home() -> Html {
                         <li><Link<AppRoute> to={AppRoute::UseDebounce} classes="app-link" >{ "use_debounce" }</Link<AppRoute>> { " - debounces a function." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseDebounceEffect} classes="app-link" >{ "use_debounce_effect" }</Link<AppRoute>> { " - debounces an effect." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseThrottle} classes="app-link" >{ "use_throttle" }</Link<AppRoute>> { " - throttles a function." }</li>
+                        <li><Link<AppRoute> to={AppRoute::UseThrottleEffect} classes="app-link" >{ "use_throttle_effect" }</Link<AppRoute>> { " - throttles an effect." }</li>
                     </ul>
 
                     <h2>{ "Lifecycles" }</h2>

examples/yew-app/src/routes/hooks/mod.rs

@@ -41,6 +41,7 @@ mod use_size;
 mod use_state_ptr_eq;
 mod use_swipe;
 mod use_throttle;
+mod use_throttle_effect;
 mod use_throttle_state;
 mod use_timeout;
 mod use_title;
@@ -94,6 +95,7 @@ pub use use_size::*;
 pub use use_state_ptr_eq::*;
 pub use use_swipe::*;
 pub use use_throttle::*;
+pub use use_throttle_effect::*;
 pub use use_throttle_state::*;
 pub use use_timeout::*;
 pub use use_title::*;

examples/yew-app/src/routes/hooks/use_throttle_effect.rs

@@ -0,0 +1,35 @@
+use yew::prelude::*;
+
+use yew_hooks::{use_throttle_effect, use_update};
+
+/// `use_throttle_effect` demo
+#[function_component(UseThrottleEffect)]
+pub fn throttle_effect() -> Html {
+    let state = use_state(|| 0);
+    let update = use_update();
+
+    {
+        let state = state.clone();
+        use_throttle_effect(
+            move || {
+                state.set(*state + 1);
+            },
+            2000,
+        )
+    };
+
+    let onclick = { Callback::from(move |_| update()) };
+
+    html! {
+        <div class="app">
+            <header class="app-header">
+                <div>
+                    <button {onclick}>{ "Click fast!" }</button>
+                    <p>
+                        <b>{ "State: " }</b> {*state}
+                    </p>
+                </div>
+            </header>
+        </div>
+    }
+}

examples/yew-app/src/routes/mod.rs

@@ -118,6 +118,8 @@ pub enum AppRoute {
     UseThrottleState,
     #[at("/use_debounce_effect")]
     UseDebounceEffect,
+    #[at("/use_throttle_effect")]
+    UseThrottleEffect,
     #[not_found]
     #[at("/page-not-found")]
     PageNotFound,
@@ -182,6 +184,7 @@ pub fn switch(routes: &AppRoute) -> Html {
         AppRoute::UseThrottle => html! { <UseThrottle /> },
         AppRoute::UseThrottleState => html! { <UseThrottleState /> },
         AppRoute::UseDebounceEffect => html! { <UseDebounceEffect /> },
+        AppRoute::UseThrottleEffect => html! { <UseThrottleEffect /> },
         AppRoute::PageNotFound => html! { <Home /> },
     }
 }