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.

Practice

1. What is the main purpose of the onDestroy function in a Svelte component?

easy

A. To run cleanup code when the component is removed from the page

B. To initialize component state when it loads

C. To update the component when data changes

D. To handle user input events

Solution

1. Step 1: Understand the lifecycle of a Svelte component

   The onDestroy function runs when the component is about to be removed from the page.

2. Step 2: Identify the purpose of onDestroy

   It is used to clean up things like timers or event listeners to avoid bugs or memory leaks.

3. Final Answer:

   To run cleanup code when the component is removed from the page -> Option A

4. Quick Check:

   onDestroy = cleanup on removal [OK]

Hint: Remember: onDestroy cleans up when component leaves [OK]

Common Mistakes:

• Confusing onDestroy with onMount
• Thinking onDestroy runs on data update
• Using onDestroy to initialize state

2. Which of the following is the correct way to import and use onDestroy in a Svelte component?

easy

A. import { onDestroy } from 'svelte'; onDestroy.cleanup(() => { /* cleanup */ });

B. import onDestroy from 'svelte'; onDestroy(() => { /* cleanup */ });

C. import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ });

D. import { onDestroy } from 'svelte'; onDestroy = () => { /* cleanup */ };

Solution

1. Step 1: Check the import syntax

   The correct import is a named import: import { onDestroy } from 'svelte';

2. Step 2: Check how to use onDestroy

   You call onDestroy with a function to run cleanup code: onDestroy(() => { ... });

3. Final Answer:

   import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); -> Option C

4. Quick Check:

   Correct import and call syntax = import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); [OK]

Hint: Use named import and call onDestroy with a function [OK]

Common Mistakes:

• Using default import instead of named import
• Assigning onDestroy instead of calling it
• Calling a non-existent cleanup method

3. Consider this Svelte component code:

import { onDestroy } from 'svelte';

let timer;
onDestroy(() => {
  clearInterval(timer);
});

timer = setInterval(() => {
  console.log('Tick');
}, 1000);

What happens when this component is removed from the page?

medium

A. The interval timer continues running and logs 'Tick' forever

B. The component reloads automatically

C. An error occurs because clearInterval is called incorrectly

D. The interval timer stops and no more 'Tick' logs appear

Solution

1. Step 1: Understand the timer setup

   The code sets a repeating timer with setInterval that logs 'Tick' every second.

2. Step 2: Analyze the onDestroy cleanup

   The onDestroy callback calls clearInterval(timer), which stops the timer when the component is removed.

3. Final Answer:

   The interval timer stops and no more 'Tick' logs appear -> Option D

4. Quick Check:

   onDestroy clears timer = stops logs [OK]

Hint: onDestroy stops timers to prevent leftover logs [OK]

Common Mistakes:

• Thinking timer keeps running after component removal
• Confusing clearInterval with setTimeout
• Assuming onDestroy runs multiple times

4. This Svelte component tries to clean up an event listener on destroy:

import { onDestroy } from 'svelte';

function handleClick() {
  console.log('Clicked');
}

window.addEventListener('click', handleClick);

onDestroy(() => {
  window.removeEventListener('click');
});

What is wrong with this code?

medium

A. removeEventListener is missing the event handler function argument

B. onDestroy should be called before addEventListener

C. handleClick should be defined inside onDestroy

D. window.addEventListener should be inside onDestroy

Solution

1. Step 1: Check removeEventListener usage

   To remove an event listener, you must pass both the event type and the exact handler function.

2. Step 2: Identify the missing argument

   The code calls window.removeEventListener('click'); without the handler handleClick, so the listener is not removed.

3. Final Answer:

   removeEventListener is missing the event handler function argument -> Option A

4. Quick Check:

   removeEventListener needs event and handler [OK]

Hint: Always pass event and handler to removeEventListener [OK]

Common Mistakes:

• Omitting the handler function in removeEventListener
• Adding listeners inside onDestroy instead of removing
• Defining handler inside onDestroy causing scope issues

5. You want to use onDestroy to clean up multiple resources: a timer and a custom event listener. Which is the best way to do this in a Svelte component?

import { onDestroy } from 'svelte';

let timer = setInterval(() => console.log('Tick'), 1000);

function onCustomEvent() { console.log('Event'); }

window.addEventListener('custom', onCustomEvent);

// What is the correct onDestroy usage?

hard

A. onDestroy(() => { clearInterval(timer); window.removeEventListener('custom'); });

B. onDestroy(() => { clearInterval(timer); window.removeEventListener('custom', onCustomEvent); });

C. onDestroy(() => { clearInterval(timer); }); onDestroy(() => { window.removeEventListener('custom'); });

D. onDestroy(() => { clearInterval(); window.removeEventListener('custom', onCustomEvent); });

Solution

1. Step 1: Combine cleanup tasks in one onDestroy callback

   onDestroy accepts a single function where you can clean multiple resources.

2. Step 2: Correctly clear timer and remove event listener

   Use clearInterval(timer) and window.removeEventListener('custom', onCustomEvent) with proper arguments.

3. Final Answer:

   onDestroy(() => { clearInterval(timer); window.removeEventListener('custom', onCustomEvent); }); -> Option B

4. Quick Check:

   Single onDestroy with all cleanup calls [OK]

Hint: Put all cleanup code inside one onDestroy callback [OK]

Common Mistakes:

• Using multiple onDestroy calls instead of one
• Omitting handler in removeEventListener
• Calling clearInterval without timer argument