How to clear Interval after component unmount

[dvorakchen]

I used the Interval from 'use gloo::timers::callback::Interval;',

#[component]
pub fn App() -> impl IntoView {
    let (index, set_index) = create_signal(0);

    Interval::new(500, move || {
        set_index.update(|v| *v += 1);
        //  do something
    })
    .forget(); // forget() will take the ownership so I can keep the variable from Interval::new

   view! {
    .................
  }
}

I hop I can clear the Interval after I do not need this component, but how to do it?

[gbj]

#[component]
pub fn App() -> impl IntoView {
    let (index, set_index) = create_signal(0);

    let handle = Interval::new(500, move || {
        set_index.update(|v| *v += 1);
        //  do something
    });
    on_cleanup(move || drop(handle));
    

   view! {
    .................
  }
}

[gbj]

I'm not sure what you mean.

[dvorakchen]

Thanks you very much ❤

[ChocolateLoverRaj]

Just wondering, why doesn't Leptos support cleanup functions as part of create_effect like React does?

[gbj]

@ChocolateLoverRaj The general reason is that React and Leptos work in extremely different ways and there's no reason to believe that the way something works in React would be the way it works in Leptos. The specific reason here is that our effects actually have a value, i.e., the value you return from the effect is passed into the effect closure the next time it runs.

This is very very useful for the way that fine-grained rendering works (which you probably won't encounter yourself), and is also very useful given the way Rust's ownership model works: For example, given a library like gloo-timers, which cancels a timer when it drops, you could actually use an effect to manage that ownership:

let (index, set_index) = create_signal(0);
let (increment_by, set_increment_by) = create_signal(1);

// this effect will run every time `increment_by` change
create_effect(move |prev: Option<Interval>| {
    // creates a new interval, to increment by the given amount
    Interval::new(500, move || {
        set_index.update(|v| *v += increment_by());
    })
    
    // `prev` goes out of scope here, cancelling itself on `Drop`
});