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.