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.