onDestroy in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the lifecycle function that runs cleanup code in a Svelte component.

Svelte

import { [1] } from 'svelte';

Drag options to blanks, or click blank then click option'

AonMount

BafterUpdate

ConDestroy

DbeforeUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using onMount instead of onDestroy

Forgetting to import the function

Confusing with update lifecycle functions

The onDestroy function is imported from 'svelte' to run cleanup code when a component is removed.

2fill in blank

medium

Complete the code to register a cleanup function inside the onDestroy lifecycle in Svelte.

Svelte

onDestroy(() => { [1] });

Drag options to blanks, or click blank then click option'

Aconsole.log('Component created')

Bconsole.log('Component mounted')

Cconsole.log('Component updated')

Dconsole.log('Component destroyed')

Attempts:

3 left

💡 Hint

Common Mistakes

Logging 'Component mounted' inside onDestroy

Using update lifecycle messages

Not providing a function inside onDestroy

The function inside onDestroy runs when the component is removed, so logging 'Component destroyed' is appropriate.

3fill in blank

hard

Fix the error in the code by completing the onDestroy usage correctly.

Svelte

onDestroy [1] console.log('Cleanup'); });

Drag options to blanks, or click blank then click option'

A() => {

B(() => {

C(() => (

D() => (

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of curly braces for the function body

Missing parentheses for the arrow function

Incorrect placement of braces

The correct syntax for the function passed to onDestroy is an arrow function with curly braces: () => { ... }.

4fill in blank

hard

Fill both blanks to correctly import and use onDestroy to clear an interval timer.

Svelte

import { [1] } from 'svelte';

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

[2](() => {
  clearInterval(timer);
});

Drag options to blanks, or click blank then click option'

AonDestroy

BonMount

CbeforeUpdate

DafterUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using onMount instead of onDestroy for cleanup

Forgetting to clear the interval

Importing the wrong lifecycle function

You import onDestroy and use it to clear the interval when the component is destroyed, preventing memory leaks.

5fill in blank

hard

Fill all three blanks to use onDestroy to unsubscribe from a store in Svelte.

Svelte

import { [1] } from 'svelte';

const unsubscribe = store.subscribe(value => {
  console.log(value);
});

[2](() => {
  [3]();
});

Drag options to blanks, or click blank then click option'

AonDestroy

Bunsubscribe

DonMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using onMount instead of onDestroy

Not calling unsubscribe inside the cleanup function

Confusing unsubscribe variable with lifecycle functions

You import onDestroy to run cleanup code, call it to register the cleanup function, and inside that function call unsubscribe() to stop listening to the store.

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