onDestroy: Cleanup
Run teardown logic such as clearing timers or unsubscribing when the component is removed.
onDestroy: Cleanup is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why onDestroy
onDestroy runs when a component is removed from the DOM. Use it to tear down listeners, timers, or subscriptions.
Import and Call
Import from svelte and pass a callback.
<script>
import { onDestroy } from "svelte";
onDestroy(() => console.log("bye"));
</script>Cleanup Pattern
Cancel timers, abort fetches, unsubscribe from stores.
onDestroy(() => clearInterval(id));Multiple onDestroys
Call as many times as needed. Each cleanup runs.
Server Runs Too
Unlike onMount, onDestroy runs on the server during SSR teardown.
Pair with onMount
A common pattern is to set things up in onMount and tear them down in onDestroy.
Or Just Return from onMount
Returning a function from onMount is equivalent to onDestroy for simple cleanups and keeps code colocated.
Avoid Side Effects in destroy
Keep cleanup synchronous and quick. Long async work may not finish before navigation.
Store Auto-Subscribe
If you use the $store shorthand, Svelte auto-unsubscribes on destroy — no manual onDestroy needed.
Memory Leaks
Forgetting cleanup is the #1 source of memory leaks in SPAs. Always teardown listeners you added globally.
Pages vs Components
Route changes destroy page components, triggering onDestroy. Use it for per-page cleanup too.
Quick Check
What's the simplest way to tie setup/teardown together?
Recap
onDestroy runs when the component unmounts. Use it (or onMount's return) to clean up listeners and timers.
Frequently asked questions
Is the “onDestroy: Cleanup” lesson free?
Yes — the full text of “onDestroy: Cleanup” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “onDestroy: Cleanup”?
Run teardown logic such as clearing timers or unsubscribing when the component is removed. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “onDestroy: Cleanup” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.