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.