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.