onMount in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when onMount runs in this Svelte component?

Consider this Svelte component code:

import { onMount } from 'svelte';

let message = 'Waiting...';

onMount(() => {
  message = 'Component is ready!';
});

<h1>{message}</h1>

What will the user see when this component first appears?

Svelte

import { onMount } from 'svelte';

let message = 'Waiting...';

onMount(() => {
  message = 'Component is ready!';
});

<h1>{message}</h1>

A The component throws an error because message cannot be changed inside onMount.

B The heading immediately shows 'Component is ready!' without showing 'Waiting...'.

C The heading stays 'Waiting...' forever because onMount does not run.

D The heading first shows 'Waiting...' then changes to 'Component is ready!' after mount.

💡 Hint

Remember that onMount runs after the component appears in the page.

The message variable starts as 'Waiting...'. When the component mounts, onMount runs and updates message to 'Component is ready!'. This triggers Svelte to update the displayed heading. So the user first sees 'Waiting...' then it changes.

❓ lifecycle

intermediate

Which statement about onMount is true?

Choose the correct description of onMount in Svelte.

A <code>onMount</code> runs once after the component is first added to the DOM.

B <code>onMount</code> runs every time the component updates its state.

C <code>onMount</code> runs only when the component is removed from the DOM.

D <code>onMount</code> runs before the component is created.

💡 Hint

Think about when you want to run code that needs the component visible.

onMount runs exactly once after the component is inserted into the page. It does not run on updates or before creation. Cleanup code runs on unmount, but onMount itself runs only once after mount.

🔧 Debug

advanced

Why does this onMount code not update the UI?

Look at this Svelte component snippet:

import { onMount } from 'svelte';

let count = 0;

onMount(() => {
  var count = count + 1;
});

<p>Count: {count}</p>

But the displayed count stays 0. Why?

Svelte

import { onMount } from 'svelte';

let count = 0;

onMount(() => {
  var count = count + 1;
});

<p>Count: {count}</p>

A Because <code>onMount</code> runs too early before the UI is ready to update.

B The <code>var count</code> shadows the outer reactive <code>let count</code>, so the assignment affects a local variable instead.

C Because the assignment inside <code>onMount</code> does not trigger reactivity without <code>$:</code>.

D Because <code>count</code> is a constant and cannot be changed.

💡 Hint

Check variable declarations and scoping inside the callback function.

The var count = count + 1; inside the onMount callback declares a new local variable named count (using var), which shadows the outer reactive let count. The right-hand side reads the outer count (0), assigns 1 to the local count, but the outer reactive variable remains 0. No reactivity is triggered for the outer variable. To fix, use count = count + 1; without var.

📝 Syntax

advanced

Which onMount usage is syntactically correct in Svelte?

Choose the correct way to use onMount to run code after component mount.

A onMount { console.log('Mounted'); }

B onMount(() =&gt; { console.log('Mounted'); });

C onMount(() =&gt; console.log('Mounted'))

D onMount(() =&gt; { return console.log('Mounted'); });

💡 Hint

Remember the syntax for calling onMount with an arrow function.

onMount must be called with a function argument using parentheses: onMount(fn). Option A is invalid syntax (missing ()). Options B, C, and D are valid JavaScript, but B matches the standard style in Svelte docs with a block body {}. C is a concise arrow function (valid), D works but the return is unnecessary since console.log returns undefined.

❓ state_output

expert

What is the final value of status after this Svelte component mounts?

Analyze this code:

import { onMount } from 'svelte';

let status = 'init';

onMount(() => {
  status = 'loading';
  setTimeout(() => {
    status = 'done';
  }, 100);
});

<p>Status: {status}</p>

What will status show 200ms after the component appears?

Svelte

import { onMount } from 'svelte';

let status = 'init';

onMount(() => {
  status = 'loading';
  setTimeout(() => {
    status = 'done';
  }, 100);
});

<p>Status: {status}</p>

A 'done'

B 'loading'

C An error occurs because setTimeout is not allowed inside onMount

D 'init'

💡 Hint

Think about asynchronous updates and timing.

When the component mounts, status changes to 'loading'. After 100ms, the setTimeout callback runs and sets status to 'done'. After 200ms, the status is 'done'. No errors occur because setTimeout is allowed inside onMount.

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