onMount in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is onMount in Svelte?

onMount is a function in Svelte that runs code after the component is first added to the page (DOM). It is used to perform setup tasks like fetching data or starting timers.

beginner

When does the onMount function run in a Svelte component?

onMount runs once, right after the component appears on the screen (after it is inserted into the DOM).

beginner

How do you import <code>onMount</code> in a Svelte component?

<p>You import it from <code>svelte</code> like this: <code>import { onMount } from 'svelte';</code></p>

beginner

What kind of tasks is onMount best suited for?

onMount is best for tasks that need to happen once the component is visible, like fetching data, setting up event listeners, or starting animations.

intermediate

How do you clean up resources set up in onMount?

You return a cleanup function inside onMount. This function runs when the component is removed from the page, helping avoid memory leaks.

What does onMount do in Svelte?

A Runs code when the component is destroyed

B Runs code before the component is created

C Runs code after the component is added to the DOM

D Runs code every time the component updates

onMount runs once after the component is inserted into the DOM.

How do you import onMount in a Svelte file?

A import { onMount } from 'svelte';

B import onMount from 'svelte/onMount';

C import onMount from 'svelte';

D import { onMount } from 'svelte/onMount';

You import onMount as a named import from svelte.

Which of these is a good use for onMount?

A Fetching data when the component loads

B Updating the component state on every click

C Styling the component with CSS

D Defining component props

onMount is ideal for running code once after the component appears, like fetching data.

What should you do inside onMount to clean up resources?

A Nothing, cleanup is automatic

B Return a function that cleans up resources

C Call <code>onDestroy</code> manually

D Use <code>setTimeout</code> to delay cleanup

Returning a cleanup function inside onMount ensures resources are freed when the component is removed.

How many times does onMount run during a component's life?

A Multiple times, on every update

B Never, it is optional

C Every time the component is clicked

D Once, after the component is added to the DOM

onMount runs only once, right after the component is inserted into the DOM.

Explain what onMount does in Svelte and give an example of when you would use it.

Think about what happens when a component first appears on the screen.

Describe how to clean up resources in onMount and why it is important.

Consider what happens when a component disappears from the page.

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