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.