onDestroy in Svelte - Mini Project: Build & Apply

Using <code>onDestroy</code> in Svelte to Clean Up

📖 Scenario: You are building a simple Svelte component that starts a timer when it loads. When the component is removed from the page, you want to stop the timer to avoid errors or memory leaks.

🎯 Goal: Create a Svelte component that starts a timer counting seconds and uses onDestroy to stop the timer when the component is removed.

📋 What You'll Learn

Create a variable seconds initialized to 0

Create a variable timer to hold the interval ID

Use setInterval to increase seconds every second

Use onDestroy to clear the interval using clearInterval(timer)

💡 Why This Matters

🌍 Real World

Timers and intervals are common in web apps for clocks, countdowns, or refreshing data. Cleaning them up prevents bugs and wasted resources.

💼 Career

Understanding lifecycle hooks like <code>onDestroy</code> is essential for building reliable Svelte apps that manage resources well.

1

Set up the seconds variable

Create a variable called seconds and set it to 0 inside the <script> tag.

Svelte

// Create a variable called seconds and set it to 0
// Your code here


Seconds passed: {seconds}

Hint

Use let seconds = 0; inside the <script> tag.

2

Create the timer variable

Add a variable called timer inside the <script> tag to hold the interval ID. Initialize it without a value.

Svelte

  let seconds = 0;
  // Create a variable called timer to hold the interval ID
  // Your code here


Seconds passed: {seconds}

Hint

Declare let timer; without assigning a value yet.

3

Start the timer with setInterval

Inside the <script> tag, assign timer to a setInterval that increases seconds by 1 every 1000 milliseconds.

Svelte

  let seconds = 0;
  let timer;
  // Use setInterval to increase seconds by 1 every 1000 ms and assign it to timer
  // Your code here


Seconds passed: {seconds}

Hint

Use timer = setInterval(() => { seconds += 1; }, 1000); to update seconds every second.

4

Use onDestroy to clear the timer

Import onDestroy from 'svelte' and use it inside the <script> tag to clear the interval by calling clearInterval(timer) when the component is destroyed.

Svelte

  let seconds = 0;
  let timer;
  timer = setInterval(() => {
    seconds += 1;
  }, 1000);

  // Import onDestroy and use it to clearInterval(timer) when component is destroyed
  // Your code here


Seconds passed: {seconds}

Hint

Use import { onDestroy } from 'svelte'; and then onDestroy(() => { clearInterval(timer); });.

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