Cleaning Up Resources with onDestroy

Snippet

Cleaning Up Resources with onDestroy

The onDestroy lifecycle hook is crucial for memory management. It runs just before the component is removed from the DOM, allowing you to clean up timers, event listeners, or manual subscriptions.

snippet.js
javascript
import { onDestroy } from 'svelte';
 
const interval = setInterval(() => {
  console.log('Tick');
}, 1000);
 
onDestroy(() => {
  clearInterval(interval);
});

svelte

Breakdown

import { onDestroy } from 'svelte';

Imports the lifecycle function that triggers upon component destruction.

const interval = setInterval(...);

Sets up a side effect that persists unless manually cleared.

clearInterval(interval);

Stops the interval to prevent memory leaks after the component is gone.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Cleaning Up Resources with onDestroy

Related