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.