onMount in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the onMount function from Svelte.

Svelte

import { [1] } from 'svelte';

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

AonMount

BuseEffect

CcomponentDidMount

DonInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using React lifecycle functions like useEffect or componentDidMount instead of onMount.

Trying to import a function that doesn't exist in Svelte.

The onMount function is imported from 'svelte' to run code when the component is first added to the page.

2fill in blank

medium

Complete the code to run a function when the component mounts.

Svelte

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

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

AsetTimeout()

Breturn () => {}

Cconsole.log('Mounted!')

Dexport default

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to export inside the onMount callback.

Using setTimeout without a function.

The function inside onMount runs when the component appears. Logging 'Mounted!' shows this.

3fill in blank

hard

Fix the error in the onMount usage by completing the code.

Svelte

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

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

Aasync

Bawait

Cfunction

Dexport

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'await' before the function keyword.

Trying to export inside the callback.

You can make the onMount callback async to use await inside it if needed.

4fill in blank

hard

Fill both blanks to correctly import and use onMount with a cleanup function.

Svelte

import { [1] } from 'svelte';

onMount(() => {
  const id = setInterval(() => console.log('Tick'), 1000);
  return () => clearInterval([2]);
});

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

AonMount

Bid

Cinterval

DsetInterval

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable name in clearInterval.

Importing a wrong function name.

Import onMount to run code on mount. The cleanup function clears the interval using the variable id.

5fill in blank

hard

Fill all three blanks to create a reactive variable updated on mount.

Svelte

import { [1] } from 'svelte';

let count = 0;

onMount(() => {
  const timer = setInterval(() => {
    count [2] count + 1;
  }, 1000);
  return () => clearInterval([3]);
});

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

AonMount

B=

Ctimer

D+=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+=' instead of '=' for updating count (works but not the intended answer).

Clearing interval with wrong variable.

Import onMount to run code on mount. Use = to update count. Clear the interval using timer.

Practice

1. What is the main purpose of onMount in a Svelte component?

easy

A. To run code after the component appears on the page

B. To define component styles

C. To declare component props

D. To handle user input events

Solution

1. Step 1: Understand the role of onMount

   onMount is a lifecycle function in Svelte that runs after the component is added to the page.

2. Step 2: Compare options with onMount purpose

   Options A, B, and D relate to props, styles, and events, which are not the main use of onMount.

3. Final Answer:

   To run code after the component appears on the page -> Option A

4. Quick Check:

   onMount runs code after mount = C [OK]

Hint: Remember: onMount runs code after component shows [OK]

Common Mistakes:

• Confusing onMount with event handlers
• Thinking onMount runs before rendering
• Using onMount to declare props

2. Which of the following is the correct syntax to import and use onMount in a Svelte component?

easy

A. import onMount from 'svelte'; onMount(() => { /* code */ });

B. import { onMount } from 'svelte'; onMount(() => { /* code */ });

C. import { onMount } from 'svelte'; onMount = () => { /* code */ };

D. import onMount from 'svelte'; onMount = () => { /* code */ };

Solution

1. Step 1: Check correct import syntax

   In Svelte, onMount is a named export, so it must be imported with curly braces: import { onMount } from 'svelte';

2. Step 2: Verify usage of onMount

   The function is called with a callback: onMount(() => { /* code */ });. Assigning it like a variable is incorrect.

3. Final Answer:

   import { onMount } from 'svelte'; onMount(() => { /* code */ }); -> Option B

4. Quick Check:

   Named import + call with callback = A [OK]

Hint: Use curly braces for named imports like onMount [OK]

Common Mistakes:

• Importing onMount without braces
• Assigning onMount instead of calling it
• Using default import syntax

3. What will be logged to the console when this Svelte component runs?

import { onMount } from 'svelte';

let count = 0;

onMount(() => {
  count = 5;
  console.log(count);
});

console.log(count);

medium

A. 5 then 0

B. 5 then 5

C. 0 then 5

D. 0 then 0

Solution

1. Step 1: Understand execution order

   The first console.log(count) runs immediately, before onMount callback runs, so it logs 0.

2. Step 2: onMount callback runs after component mounts

   Inside onMount, count is set to 5 and logged, so the second log is 5.

3. Final Answer:

   0 then 5 -> Option C

4. Quick Check:

   Immediate log 0, onMount log 5 = B [OK]

Hint: onMount runs after initial code, so logs happen in that order [OK]

Common Mistakes:

• Assuming onMount runs before initial code
• Thinking both logs show same value
• Ignoring asynchronous lifecycle timing

4. Identify the error in this Svelte component using onMount:

import { onMount } from 'svelte';

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

medium

A. onMount should be used inside <script> tag only

B. Missing import statement

C. Callback function is missing parentheses

D. onMount is assigned instead of called

Solution

1. Step 1: Check how onMount is used

   The code assigns a function to onMount instead of calling onMount() with a callback.

2. Step 2: Correct usage of onMount

   It should be onMount(() => { console.log('Mounted'); }); to register the callback properly.

3. Final Answer:

   onMount is assigned instead of called -> Option D

4. Quick Check:

   Assigning onMount instead of calling it = A [OK]

Hint: Call onMount with a function, don't assign it [OK]

Common Mistakes:

• Assigning onMount instead of calling
• Forgetting parentheses on callback
• Confusing import errors with usage errors

5. You want to fetch data from an API only once when a Svelte component appears, and clean up a timer when it disappears. Which is the best way to do this using onMount?

hard

A. Use onMount to fetch data and return a cleanup function to clear the timer

B. Fetch data outside onMount and start timer inside onMount without cleanup

C. Use onMount to fetch data and start timer but do not return cleanup

D. Start timer outside onMount and fetch data inside onMount without cleanup

Solution

1. Step 1: Understand onMount usage for setup

   onMount runs once after component appears, perfect for fetching data and starting timers.

2. Step 2: Cleanup function must be returned from onMount

   To clear timers on unmount, return a cleanup function inside onMount. Use onMount to fetch data and start timer but do not return cleanup misses cleanup, so it's incomplete.

3. Step 3: Evaluate options

   Use onMount to fetch data and return a cleanup function to clear the timer correctly fetches data and returns cleanup function to clear timer, which is best practice.

4. Final Answer:

   Use onMount to fetch data and return a cleanup function to clear the timer -> Option A

5. Quick Check:

   Fetch + cleanup in onMount = D [OK]

Hint: Return cleanup function inside onMount for timers [OK]

Common Mistakes:

• Not returning cleanup function to clear timers
• Fetching data outside onMount causing multiple calls
• Starting timers without cleanup causing leaks