Why lifecycle hooks run code at key moments in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a function when the component is first added to the page.

Svelte

import { onMount } from 'svelte';

onMount(() => {
  console.log([1]);
});

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

A'Component loaded!'

BComponent loaded!

ConMount

Dconsole.log('Component loaded!')

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the message string.

Trying to call onMount inside itself.

The onMount hook runs the code inside its function when the component appears on the page. We pass a string message to console.log to show it.

2fill in blank

medium

Complete the code to clean up when the component is removed from the page.

Svelte

import { onDestroy } from 'svelte';

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

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

Aconsole.log(Cleaning up!)

Bconsole.log('Cleaning up!')

ConDestroy()

Dcleanup()

Attempts:

3 left

💡 Hint

Common Mistakes

Missing quotes around the message.

Calling onDestroy inside itself.

The onDestroy hook runs when the component is removed. We use console.log with a string message inside quotes to show cleanup.

3fill in blank

hard

Fix the error in the code to run code after the component updates.

Svelte

import { afterUpdate } from 'svelte';

afterUpdate(() => {
  console.log([1]);
});

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

Aconsole.log('Component updated')

BComponent updated

CafterUpdate

D'Component updated'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string without quotes causes an error.

Trying to call afterUpdate inside itself.

The afterUpdate hook runs after the component changes. The message must be a string inside quotes for console.log.

4fill in blank

hard

Fill both blanks to run code when the component mounts and cleans up when it is destroyed.

Svelte

import { [1], [2] } from 'svelte';

[1](() => {
  console.log('Mounted');
});

[2](() => {
  console.log('Destroyed');
});

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

AonMount

BonDestroy

CafterUpdate

DbeforeUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up onMount and onDestroy.

Using update hooks instead of mount/destroy hooks.

onMount runs code when the component appears, and onDestroy runs code when it is removed. Import and use both to handle these moments.

5fill in blank

hard

Fill all three blanks to log messages at mount, update, and destroy lifecycle moments.

Svelte

import { [1], [2], [3] } from 'svelte';

[1](() => {
  console.log('Mounted');
});

[2](() => {
  console.log('Updated');
});

[3](() => {
  console.log('Destroyed');
});

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

AonMount

BafterUpdate

ConDestroy

DbeforeUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing beforeUpdate with afterUpdate.

Forgetting to import all three hooks.

Use onMount to run code when the component loads, afterUpdate after it changes, and onDestroy when it is removed.

Practice

1. What is the main purpose of lifecycle hooks in Svelte components?

easy

A. To handle user input events

B. To style components dynamically

C. To define component props

D. To run code at important moments during a component's life

Solution

1. Step 1: Understand lifecycle hooks

   Lifecycle hooks are special functions that run at specific times in a component's life, like when it appears or disappears.

2. Step 2: Identify their main role

   The main role is to run code at these key moments, such as setup or cleanup tasks.

3. Final Answer:

   To run code at important moments during a component's life -> Option D

4. Quick Check:

   Lifecycle hooks = run code at key moments [OK]

Hint: Lifecycle hooks run code at key moments in component life [OK]

Common Mistakes:

• Thinking lifecycle hooks are for styling
• Confusing hooks with event handlers
• Believing hooks define props

2. Which Svelte lifecycle hook is used to run code right after the component is added to the page?

easy

A. onMount

B. onDestroy

C. beforeUpdate

D. afterUpdate

Solution

1. Step 1: Recall lifecycle hook purposes

   onMount runs code after the component appears on the page, perfect for setup tasks.

2. Step 2: Match hook to timing

   onDestroy runs when component is removed, beforeUpdate and afterUpdate run around updates, not mounting.

3. Final Answer:

   onMount -> Option A

4. Quick Check:

   Code after component appears = onMount [OK]

Hint: onMount runs code after component appears [OK]

Common Mistakes:

• Using onDestroy for setup
• Confusing beforeUpdate with onMount
• Thinking afterUpdate runs on mount

3. Consider this Svelte code:

import { onMount, onDestroy } from 'svelte';

let timer;
onMount(() => {
  timer = setInterval(() => console.log('tick'), 1000);
});
onDestroy(() => {
  clearInterval(timer);
});

What happens when this component is removed from the page?

medium

A. The timer keeps running and logs 'tick' forever

B. An error occurs because clearInterval is missing

C. The timer stops and no more 'tick' logs appear

D. The component reloads automatically

Solution

1. Step 1: Understand onMount and onDestroy usage

   onMount starts a timer that logs 'tick' every second. onDestroy clears that timer when component is removed.

2. Step 2: Predict behavior on removal

   When removed, onDestroy runs and clears the timer, stopping the logs.

3. Final Answer:

   The timer stops and no more 'tick' logs appear -> Option C

4. Quick Check:

   onDestroy clears timer = stops logs [OK]

Hint: onDestroy cleans up timers to stop actions [OK]

Common Mistakes:

• Assuming timer runs forever
• Forgetting to clear timers causes memory leaks
• Thinking component reloads on removal

4. This Svelte code uses lifecycle hooks:

import { onMount } from 'svelte';

onMount(() => {
  console.log('Mounted');
});

onMount(() => {
  console.log('Setup');
});

What is the problem here?

medium

A. Only the first onMount runs, the second is ignored

B. Both onMount hooks run correctly without error

C. Multiple onMount hooks cause a syntax error

D. onMount must be inside a component function

Solution

1. Step 1: Check multiple onMount usage

   Svelte allows multiple onMount calls; all run in order when component mounts.

2. Step 2: Confirm no syntax or scope errors

   Both hooks run and log messages; no syntax error or ignoring occurs.

3. Final Answer:

   Both onMount hooks run correctly without error -> Option B

4. Quick Check:

   Multiple onMount hooks run fine [OK]

Hint: Multiple onMount hooks run in order, no error [OK]

Common Mistakes:

• Thinking multiple hooks cause errors
• Believing only one hook runs
• Assuming onMount must be inside a function

5. You want to fetch data when a Svelte component appears and cancel the fetch if the component is removed before it finishes. Which lifecycle hooks should you use and why?

hard

A. Use onMount to start fetch and onDestroy to cancel it

B. Use beforeUpdate to start fetch and afterUpdate to cancel it

C. Use onDestroy to start fetch and onMount to cancel it

D. Use afterUpdate to start fetch and beforeUpdate to cancel it

Solution

1. Step 1: Identify when to start fetch

   Fetching data should start when component appears, so onMount is the right hook.

2. Step 2: Identify when to cancel fetch

   If component is removed before fetch finishes, onDestroy runs to cancel or clean up the fetch.

3. Final Answer:

   Use onMount to start fetch and onDestroy to cancel it -> Option A

4. Quick Check:

   Start onMount, cancel onDestroy [OK]

Hint: Start fetch onMount, cancel onDestroy for cleanup [OK]

Common Mistakes:

• Using update hooks for fetch start/cancel
• Starting fetch onDestroy (too late)
• Canceling fetch onMount (too early)