Function use_raf_state

pub fn use_raf_state<'hook, T, F>(
    init_fn: F,
) -> impl 'hook + Hook<Output = UseRafStateHandle<T>>
where
    T: 'static + 'hook,
    F: FnOnce() -> T + 'hook,

A state hook that only updates state in the callback of requestAnimationFrame.

Example

use yew_hooks::prelude::*;

#[function_component(UseRafState)]
fn raf_state() -> Html {
    let state = use_raf_state(|| (0f64, 0f64));

    {
        let state = state.clone();
        use_event_with_window("resize", move |e: Event| {
            let window: Window = e.target_unchecked_into();
            state.set((
                window.inner_width().unwrap().as_f64().unwrap(),
                window.inner_height().unwrap().as_f64().unwrap(),
            ));
        });
    }
    
    html! {
        <>
            <b>{ " Width: " }</b>
            { state.0 }
            <b>{ " Height: " }</b>
            { state.1 }
        </>
    }
}

Note

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

pub fn use_raf_state<T, F>(init_fn: F) -> UseRafStateHandle<T>
where
    T: 'static,
    F: FnOnce() -> T,
{
    /* implementation omitted */
}