Function use_debounce

pub fn use_debounce<'hook, Callback>(
    callback: Callback,
    millis: u32,
) -> impl 'hook + Hook<Output = UseDebounceHandle>
where
    Callback: FnOnce() + 'static + 'hook,

A hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.

Example

use yew_hooks::prelude::*;

#[function_component(Debounce)]
fn debounce() -> Html {
    let status = use_state(|| "Typing stopped".to_string());
    let value = use_state(|| "".to_string());
    let debounced_value = use_state(|| "".to_string());
    
    let debounce = {
        let value = value.clone();
        let status = status.clone();
        let debounced_value = debounced_value.clone();
        use_debounce(
            move || {
                debounced_value.set((*value).clone());
                status.set("Typing stopped".to_string());
            },
            2000,
        )
    };
    
    let oninput = {
        let status = status.clone();
        let value = value.clone();
        let debounce = debounce.clone();
        Callback::from(move |e: InputEvent| {
            let input: HtmlInputElement = e.target_unchecked_into();
            value.set(input.value());
            status.set("Waiting for typing to stop...".to_string());
            debounce.run();
        })
    };
    
    let onclick = { Callback::from(move |_| debounce.cancel()) };
    
    html! {
        <>
            <input type="text" value={(*value).clone()} placeholder="Debounced input" {oninput}/>
            <button {onclick}>{ "Cancel debounce" }</button>
            <p>{&*status}</p>
            <p>
                <b>{ "Value: " }</b> {&*value}
            </p>
            <p>
                <b>{ "Debounced value: " }</b> {&*debounced_value}
            </p>
        </>
    }
}

Note

When used in function components and hooks, this hook is equivalent to:

pub fn use_debounce<Callback>(callback: Callback, millis: u32) -> UseDebounceHandle
where
    Callback: FnOnce() + 'static,
{
    /* implementation omitted */
}