onMount in Svelte - Performance & Optimization

Performance: onMount

MEDIUM IMPACT

onMount affects the timing of when JavaScript code runs after the component is added to the page, impacting initial interaction readiness and rendering speed.

Running setup code when a component loads

Svelte

import { onMount } from 'svelte';
onMount(() => {
  setTimeout(() => {
    // heavy code deferred
    for (let i = 0; i < 100000000; i++) {}
  }, 0);
});

Defers heavy work to after initial rendering, keeping UI responsive.

📈 Performance GainImproves INP by avoiding main thread blocking during initial paint

Running setup code when a component loads

Svelte

import { onMount } from 'svelte';
onMount(() => {
  // heavy synchronous code
  for (let i = 0; i < 100000000; i++) {}
});

Heavy synchronous code inside onMount blocks the main thread, delaying user interaction readiness.

📉 Performance CostBlocks rendering and interaction for 100+ ms depending on device

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous code in onMount	1 (component mount)	1 reflow triggered	Blocks paint until done	[X] Bad
Light or deferred code in onMount	1 (component mount)	1 reflow triggered	Paint happens promptly	[OK] Good

Rendering Pipeline

onMount runs after the component is inserted into the DOM and after the browser paints. Heavy synchronous work here can delay input responsiveness.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution blocking main thread

Core Web Vital Affected

INP

onMount affects the timing of when JavaScript code runs after the component is added to the page, impacting initial interaction readiness and rendering speed.

Optimization Tips

1Keep onMount code light and fast to avoid blocking rendering.

2Defer heavy or long-running tasks asynchronously after mount.

3Use onMount only for setup that requires DOM access.

Performance Quiz - 3 Questions

What is the main performance risk of running heavy synchronous code inside onMount?

A It blocks the main thread, delaying user interaction readiness.

B It increases the bundle size significantly.

C It causes layout shifts after the page loads.

D It prevents the component from mounting.

DevTools: Performance

How to check: Record a performance profile while loading the component. Look for long tasks during onMount execution.

What to look for: Long tasks blocking main thread after DOM insertion indicate slow onMount code.

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