Skip to main content
Schedules a callback to run immediately before the component is unmounted. Of the lifecycle functions (onMount, beforeUpdate, afterUpdate and onDestroy), this is the only one that runs inside a server-side component.

​
Signature

function onDestroy(fn: () => any): void
​
fn
function
required
A function to run immediately before the component is unmounted.

​
Usage

<script>
  import { onDestroy } from 'svelte';

  onDestroy(() => {
    console.log('component is being destroyed');
  });
</script>

​
Cleanup example

<script>
  import { onDestroy } from 'svelte';

  const interval = setInterval(() => {
    console.log('tick');
  }, 1000);

  onDestroy(() => {
    clearInterval(interval);
  });
</script>

​
With external modules

onDestroy can be called from external modules, making it useful for encapsulating reusable logic: 
// utils.js
import { onDestroy } from 'svelte';

export function setupTimer() {
  const interval = setInterval(() => {
    console.log('tick');
  }, 1000);

  onDestroy(() => {
    clearInterval(interval);
  });
}

<script>
  import { setupTimer } from './utils.js';

  setupTimer();
</script>

​
Server-side rendering

Unlike other lifecycle functions, onDestroy does run during server-side rendering. This makes it useful for cleanup that should happen in both client and server environments.

​
Notes

  • Must be called during component initialization
  • Runs on both client and server
  • Can be called from external modules
  • Runs immediately before the component is unmounted