This is unreleased documentation for Yew Next version.
For up-to-date documentation, see the latest version on

Function yew::functional::use_effect

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

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.


use yew::prelude::*;

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>


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


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


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

pub fn use_effect<F, D>(f: F)
    F: FnOnce() -> D + 'static,
    D: TearDown,
    /* implementation omitted */