How to properly handle cleanup in Svelte 5 with $effect?

[kingpig0117]

Hi everyone! 👋

I'm migrating my project from Svelte 4 to Svelte 5 and I'm a bit confused about how to handle cleanup functions with the new $effect rune.

In Svelte 4, I used onDestroy:

<script>
  import { onDestroy } from 'svelte';
  
  let interval = setInterval(() => {
    console.log('tick');
  }, 1000);
  
  onDestroy(() => {
    clearInterval(interval);
  });
</script>

How should I write this in Svelte 5 using $effect? I tried this but I'm not sure if it's the correct approach:

<script>
  $effect(() => {
    const interval = setInterval(() => {
      console.log('tick');
    }, 1000);
    
    return () => {
      clearInterval(interval);
    };
  });
</script>

Is this the right way? Are there any best practices I should follow?

Thanks in advance! 🙏

[mvpcraft]

Yes, your approach is correct! 🎉

In Svelte 5, $effect supports returning a cleanup function that runs when:

• The component is destroyed
• The effect re-runs (dependencies change)

Your code is the right way to do it:

<script>
  $effect(() => {
    const interval = setInterval(() => {
      console.log('tick');
    }, 1000);
    
    // Cleanup function
    return () => {
      clearInterval(interval);
    };
  });
</script>

Key points:

1. Return a function from $effect for cleanup — this replaces onDestroy for most cases

2. The cleanup runs automatically when the component unmounts or before the effect re-runs

3. If you need reactive dependencies, they're tracked automatically:

<script>
  let count = $state(0);
  
  $effect(() => {
    console.log(`Count is now: ${count}`);
    
    return () => {
      console.log(`Cleaning up for count: ${count}`);
    };
  });
</script>

When to still use onDestroy:

• When you need cleanup that's NOT tied to reactive dependencies
• When working with stores or external subscriptions that don't need to re-run

Here's the official docs for reference: https://svelte.dev/docs/svelte/$effect

Hope this helps! 😊

[kingpig0117]

Thanks, @mvpcraft . Thanks, Channel.