Function use_effect

pub fn use_effect<'hook, F, D>(f: F) -> impl 'hook + Hook<Output = ()>
where
    F: FnOnce() -> D + 'static + 'hook,
    D: TearDown + 'hook,

use_effect is used for hooking into the component’s lifecycle and creating side effects.

The callback is called every time after the component’s render has finished.

Example

use yew::prelude::*;

#[function_component(UseEffect)]
fn effect() -> Html {
    let counter = use_state(|| 0);

    let counter_one = counter.clone();
    use_effect(move || {
        // Make a call to DOM API after component is rendered
        gloo::utils::document().set_title(&format!("You clicked {} times", *counter_one));

        // Perform the cleanup
        || gloo::utils::document().set_title(&format!("You clicked 0 times"))
    });

    let onclick = {
        let counter = counter.clone();
        Callback::from(move |_| counter.set(*counter + 1))
    };

    html! {
        <button {onclick}>{ format!("Increment to {}", *counter) }</button>
    }
}

Destructor

Any type implementing TearDown can be used as destructor, which is called when the component is re-rendered

Tip

The callback can return [()] if there is no destructor to run.

Note

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

/// `use_effect` is used for hooking into the component's lifecycle and creating side effects.
///
/// The callback is called every time after the component's render has finished.
///
/// # Example
///
/// ```rust
/// use yew::prelude::*;
/// # use std::rc::Rc;
///
/// #[function_component(UseEffect)]
/// fn effect() -> Html {
///     let counter = use_state(|| 0);
///
///     let counter_one = counter.clone();
///     use_effect(move || {
///         // Make a call to DOM API after component is rendered
///         gloo::utils::document().set_title(&format!("You clicked {} times", *counter_one));
///
///         // Perform the cleanup
///         || gloo::utils::document().set_title(&format!("You clicked 0 times"))
///     });
///
///     let onclick = {
///         let counter = counter.clone();
///         Callback::from(move |_| counter.set(*counter + 1))
///     };
///
///     html! {
///         <button {onclick}>{ format!("Increment to {}", *counter) }</button>
///     }
/// }
/// ```
///
/// # Destructor
///
/// Any type implementing [`TearDown`] can be used as destructor, which is called when the component
/// is re-rendered
///
/// ## Tip
///
/// The callback can return [`()`] if there is no destructor to run.
pub fn use_effect<F, D>(f: F)
where
    F: FnOnce() -> D + 'static,
    D: TearDown,
{
    /* implementation omitted */
}