onDestroy in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when onDestroy runs in a Svelte component?

Consider a Svelte component that uses onDestroy to clean up resources. What is the expected behavior when the component is removed from the page?

Svelte

import { onDestroy } from 'svelte';

let timer;
onDestroy(() => {
  clearInterval(timer);
  console.log('Cleanup done');
});

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

A The interval stops and 'Cleanup done' is logged when the component is removed.

B The interval continues running even after the component is removed.

C 'Cleanup done' is logged immediately when the component is created.

D The interval is cleared but 'Cleanup done' is never logged.

💡 Hint

Think about when onDestroy callbacks run in the component lifecycle.

onDestroy runs when the component is removed from the DOM. It is used to clean up things like timers or subscriptions. So the interval stops and the cleanup message logs at that time.

❓ state_output

intermediate

What is logged after the component unmounts?

Given this Svelte component code, what will be logged to the console after the component is removed?

Svelte

import { onDestroy } from 'svelte';

let count = 0;
const interval = setInterval(() => {
  count += 1;
  console.log(count);
}, 500);

onDestroy(() => {
  clearInterval(interval);
  console.log('Stopped at', count);
});

A Numbers counting up every 500ms, then 'Stopped at' with the last count when removed.

B Only 'Stopped at 0' is logged immediately on removal.

C No logs appear because the interval is never started.

D The count resets to 0 and logs 'Stopped at 0' after removal.

💡 Hint

Consider how intervals and onDestroy interact over time.

The interval logs increasing numbers every 500ms. When the component unmounts, onDestroy clears the interval and logs the last count value.

📝 Syntax

advanced

Which option correctly uses onDestroy in Svelte?

Choose the code snippet that correctly registers an onDestroy callback in a Svelte component.

A

import { onDestroy } from 'svelte';
function onDestroy() { console.log('Cleanup'); }

B

import { onDestroy } from 'svelte';
onDestroy = () => { console.log('Cleanup'); };

C

import { onDestroy } from 'svelte';
onDestroy(() => { console.log('Cleanup'); });

D

import { onDestroy } from 'svelte';
onDestroy.add(() => { console.log('Cleanup'); });

💡 Hint

Remember how onDestroy is used as a function to register callbacks.

Option C correctly imports onDestroy and calls it with a callback function. Other options misuse assignment, redeclaration, or nonexistent methods.

🔧 Debug

advanced

Why does this onDestroy callback not run?

Look at this Svelte component code. Why does the onDestroy callback never execute?

Svelte

import { onDestroy } from 'svelte';

function cleanup() {
  console.log('Cleaning up');
}

// Missing onDestroy call
cleanup();

A Because the component never mounts, so <code>onDestroy</code> is skipped.

B Because <code>cleanup</code> is called immediately and not on destroy.

C Because <code>onDestroy</code> only works with async functions.

D Because <code>onDestroy</code> was never called to register the cleanup function.

💡 Hint

Check how onDestroy is supposed to be used to register callbacks.

The code calls cleanup() immediately but never registers it with onDestroy. So no cleanup happens on component removal.

🧠 Conceptual

expert

How does onDestroy behave with nested components in Svelte?

Consider a parent Svelte component that includes a child component. Both use onDestroy callbacks. When the parent is removed from the DOM, which onDestroy callbacks run and in what order?

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  import { onDestroy } from 'svelte';
  onDestroy(() => console.log('Parent destroyed'));
</script>
<Child />

<!-- Child.svelte -->
<script>
  import { onDestroy } from 'svelte';
  onDestroy(() => console.log('Child destroyed'));
</script>

A Only the child's <code>onDestroy</code> runs because the parent is not destroyed directly.

B First the child's <code>onDestroy</code> runs, then the parent's <code>onDestroy</code> runs.

C Only the parent's <code>onDestroy</code> runs because the child is removed with it.

D Both run simultaneously with no guaranteed order.

💡 Hint

Think about how nested components unmount in Svelte.

When the parent unmounts, Svelte first destroys child components, running their onDestroy callbacks, then runs the parent's onDestroy. This ensures proper cleanup from child to parent.

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