onMount in Svelte - Step-by-Step Execution

Concept Flow - onMount

Component starts

↓

onMount hook runs

↓

Execute onMount callback

↓

Update component state if needed

↓

Component renders with updated state

↓

Component ready on page

When a Svelte component loads, onMount runs a function once, then the component updates and shows the result.

Execution Sample

Svelte

import { onMount } from 'svelte';

let message = '';

onMount(() => {
  message = 'Hello from onMount!';
});

This code sets a message after the component loads using onMount.

Execution Table

Step	Action	State Before	State After	Component Rendered Output
1	Component starts loading	message = ''	message = ''	Displays nothing (empty)
2	onMount callback runs	message = ''	message = 'Hello from onMount!'	Still shows empty (render not updated yet)
3	Component re-renders after state change	message = 'Hello from onMount!'	message = 'Hello from onMount!'	Displays: Hello from onMount!
4	No more onMount calls	message = 'Hello from onMount!'	message = 'Hello from onMount!'	Displays: Hello from onMount!

💡 onMount runs once after component loads, then stops.

Variable Tracker

Variable	Start	After onMount	Final
message	'' (empty string)	'Hello from onMount!'	'Hello from onMount!'

Key Moments - 2 Insights

Why does the component first render with an empty message before showing the updated message?

Because onMount runs after the initial render (see step 2 in execution_table), so the first render shows the initial empty state.

Does onMount run more than once if the component updates?

No, onMount runs only once after the component is first added to the page (see exit_note).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'message' at Step 2?

A '' (empty string)

B 'Hello from onMount!'

C undefined

D null

💡 Hint

Check the 'State After' column at Step 2 in the execution_table.

At which step does the component first display the message 'Hello from onMount!'?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Component Rendered Output' column in the execution_table.

If you remove the onMount callback, what will the final message value be?

A '' (empty string)

B 'Hello from onMount!'

C null

D undefined

💡 Hint

Refer to variable_tracker and understand when message changes.

Concept Snapshot

onMount runs a function once after the component loads.
Use it to run code that needs the DOM ready.
It runs after the first render.
State changes inside onMount cause a re-render.
It runs only once per component instance.

Full Transcript

In Svelte, the onMount function runs after the component first appears on the page. It lets you run code that needs the page ready, like fetching data or setting state. Initially, the component renders with default values. Then onMount runs, updates state, and the component re-renders to show the new state. onMount runs only once per component load. This helps keep code organized and ensures things happen at the right time.

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