onMount in Svelte - Mini Project: Build & Apply

Using onMount in Svelte to Load User Data

📖 Scenario: You are building a simple user profile component in Svelte. You want to load user data only after the component appears on the screen.

🎯 Goal: Create a Svelte component that uses onMount to set user data after the component loads.

📋 What You'll Learn

Create a variable to hold user data

Import onMount from svelte

Use onMount to set the user data variable

Display the user name in the component

💡 Why This Matters

🌍 Real World

Loading data only after a component appears is common in web apps to improve performance and user experience.

💼 Career

Understanding onMount is important for Svelte developers to manage side effects and data loading properly.

1

Create a user data variable

Create a variable called user and set it to an empty object {}.

Svelte

// Create a variable called user and set it to an empty object {}
// Your code here

Hint

Use let user = {} to create an empty object variable.

2

Import onMount from svelte

Import onMount from the svelte package using import { onMount } from 'svelte';.

Svelte

let user = {};

// Import onMount from 'svelte'
// Your code here

Hint

Use import { onMount } from 'svelte'; at the top of your file.

3

Use onMount to set user data

Use onMount with a function that sets user to { name: 'Alice' } inside the function body.

Svelte

import { onMount } from 'svelte';

let user = {};

// Use onMount to set user = { name: 'Alice' }
// Your code here

Hint

Write onMount(() => { user = { name: 'Alice' }; }); to set user data after mount.

4

Display the user name in the component

Add a paragraph tag <p> that displays the text User: {user.name} inside the component.

Svelte

import { onMount } from 'svelte';

let user = {};

onMount(() => {
    user = { name: 'Alice' };
});

Hint

Use <p>User: {user.name}</p> to show the user name.

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