The destroy() Cleanup Function
Return a destroy function from an action to clean up event listeners and observers.
The destroy() Cleanup Function is a free Sveltejs Academy lesson on CoddyKit — lesson 3 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 Cleanup
Actions often add listeners or observers. Cleanup prevents memory leaks when the element unmounts.
Return destroy
An action can return an object with a destroy() function. Svelte calls it on unmount.
function listen(node) {
function onClick() { /* ... */ }
node.addEventListener("click", onClick);
return { destroy() { node.removeEventListener("click", onClick); } };
}Pair with Resources
Anything you allocate (listeners, observers, intervals) should be released in destroy.
Idempotent destroy
destroy is called once. Still, write it defensively in case of repeated unmounts.
Combine update and destroy
Return both for full lifecycle: react to param changes and clean up on unmount.
Observers
Pause and disconnect IntersectionObservers, ResizeObservers, MutationObservers in destroy.
Animation Frames
Cancel any pending requestAnimationFrame loops to avoid wasted work.
Async Cleanup
destroy can be sync. If you need async cleanup, fire-and-forget cleanup tasks.
Memory Profiling
Use browser memory tools to confirm actions release references after unmount.
TypeScript Types
The return type is ActionReturn<Params> from svelte/action.
Common Mistake
Forgetting to return destroy keeps listeners attached after the element is gone. Always pair add with remove.
Quick Check
When does destroy run?
Recap
Return { destroy } from your action to clean up listeners and observers on unmount.
Frequently asked questions
Is the “The destroy() Cleanup Function” lesson free?
Yes — the full text of “The destroy() Cleanup Function” 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 “The destroy() Cleanup Function”?
Return a destroy function from an action to clean up event listeners and observers. 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The destroy() Cleanup Function” 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.
All lessons in this course
- use: Directive Syntax
- Action Parameters and Updates
- The destroy() Cleanup Function
- Practical Actions: clickOutside tooltip autofocus