onDestroy in Svelte - Step-by-Step Execution

Concept Flow - onDestroy

Component Mounts

↓

Setup onDestroy callback

↓

Component Active

↓

Component Unmounts

↓

onDestroy callback runs

↓

Cleanup done

This flow shows how Svelte runs the onDestroy callback when a component is removed from the page to clean up resources.

Execution Sample

Svelte

import { onDestroy } from 'svelte';

onDestroy(() => {
  console.log('Cleanup running');
});

This code sets up a cleanup function that runs when the component is removed from the page.

Execution Table

Step	Action	Callback Registered	Component State	Console Output
1	Component mounts	onDestroy callback set	Active
2	Component stays active	onDestroy callback set	Active
3	Component unmounts	onDestroy callback triggered	Unmounting	Cleanup running
4	Cleanup complete	No callback pending	Destroyed

💡 Component unmount triggers onDestroy callback, then cleanup finishes.

Variable Tracker

Variable	Start	After Mount	After Unmount	Final
componentState	undefined	Active	Unmounting	Destroyed
onDestroyCallback	undefined	Registered	Triggered	None

Key Moments - 2 Insights

Why does the onDestroy callback run only when the component unmounts?

Because onDestroy is designed to clean up resources when the component is removed, as shown in execution_table step 3 where the callback triggers only on unmount.

Can onDestroy run multiple times during the component lifecycle?

No, onDestroy runs once when the component unmounts, as the callback is triggered only at that moment (execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the componentState at step 2?

A Active

B Unmounting

C Destroyed

D Undefined

💡 Hint

Check the 'Component State' column at step 2 in the execution_table.

At which step does the console output 'Cleanup running' appear?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Console Output' column in the execution_table.

If the component never unmounts, what happens to the onDestroy callback?

A It runs repeatedly

B It runs immediately after mount

C It never runs

D It runs after a delay

💡 Hint

Refer to the execution_table where the callback triggers only at unmount (step 3).

Concept Snapshot

onDestroy(callback) registers a cleanup function.
Runs once when component unmounts.
Use it to free resources like timers or subscriptions.
No repeated calls; only on removal.
Helps keep app efficient and bug-free.

Full Transcript

In Svelte, the onDestroy function lets you run code when a component is removed from the page. First, the component mounts and the onDestroy callback is registered. While the component is active, the callback waits silently. When the component unmounts, Svelte runs the onDestroy callback to clean up resources like timers or event listeners. This happens only once per component lifecycle. This process helps keep your app clean and efficient by freeing resources no longer needed.