Function freya::prelude::use_drop

pub fn use_drop<D>(destroy: D)
where D: FnOnce() + 'static,
Expand description

Creates a callback that will be run before the component is removed. This can be used to clean up side effects from the component (created with use_effect).

Example:

use dioxus::prelude::*;

fn app() -> Element {
    let state = use_signal(|| true);
    rsx! {
        for _ in 0..100 {
            h1 {
                "spacer"
            }
        }
        if **state {
            rsx! {
                child_component {}
            }
        }
        button {
            onclick: move |_| {
                state.set(!*state.get());
            },
            "Unmount element"
        }
    }
}

fn child_component() -> Element {
    let original_scroll_position = use_signal(|| 0.0);
    use_effect((), move |_| {
        to_owned![original_scroll_position];
        async move {
            let window = web_sys::window().unwrap();
            let document = window.document().unwrap();
            let element = document.get_element_by_id("my_element").unwrap();
            element.scroll_into_view();
            original_scroll_position.set(window.scroll_y().unwrap());
        }
    });

    use_drop({
        to_owned![original_scroll_position];
        /// restore scroll to the top of the page
        move || {
            let window = web_sys::window().unwrap();
            window.scroll_with_x_and_y(*original_scroll_position.current(), 0.0);
        }
    });

    rsx!{
        div {
            id: "my_element",
            "hello"
        }
    }
}