Lifecycle hooks in Composition API in Vue - Performance & Optimization

Performance: Lifecycle hooks in Composition API

MEDIUM IMPACT

This affects the timing of code execution during component rendering and updates, impacting interaction responsiveness and rendering smoothness.

Running heavy synchronous code inside lifecycle hooks

Vue

import { onMounted } from 'vue';
onMounted(() => {
  setTimeout(() => {
    // heavy task deferred
    for (let i = 0; i < 1_000_000_000; i++) {}
  }, 0);
});

Deferring heavy tasks lets the browser render first and respond to user input faster.

📈 Performance GainNon-blocking mount, improves INP by 80-90%.

Running heavy synchronous code inside lifecycle hooks

Vue

import { onMounted } from 'vue';
onMounted(() => {
  // heavy synchronous task
  for (let i = 0; i < 1_000_000_000; i++) {}
});

Heavy synchronous code blocks the main thread during component mount, delaying rendering and user interaction.

📉 Performance CostBlocks rendering for 100+ ms, causing poor INP and delayed LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous code in onMounted	Minimal	Blocks rendering causing multiple reflows	High due to delayed paint	[X] Bad
Deferred heavy code with setTimeout	Minimal	Single reflow after render	Low paint cost	[OK] Good
Direct DOM style changes in multiple hooks	Multiple style changes	2+ reflows per update	High paint cost causing jank	[X] Bad
Reactive state with watchEffect for DOM updates	Single batched DOM update	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Lifecycle hooks run JavaScript code at specific component phases, affecting style calculation, layout, and paint depending on DOM changes triggered.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution blocking Style Calculation and Layout

Core Web Vital Affected

INP

This affects the timing of code execution during component rendering and updates, impacting interaction responsiveness and rendering smoothness.

Optimization Tips

1Avoid heavy synchronous code inside lifecycle hooks to prevent blocking rendering.

2Defer expensive tasks using timers or async methods to improve input responsiveness.

3Use reactive state and watchers to batch DOM updates and minimize reflows.

Performance Quiz - 3 Questions

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

A It increases bundle size significantly.

B It blocks rendering and delays user interaction.

C It causes layout shifts after paint.

D It reduces network request speed.

DevTools: Performance

How to check: Record a performance profile during component mount and update; look for long tasks and scripting blocking time.

What to look for: Look for long scripting tasks during lifecycle hooks and multiple reflows or layout thrashing in the flame chart.

Practice

1. Which lifecycle hook in Vue's Composition API runs code right after the component is added to the page?

easy

A. onUpdated

B. onCreated

C. onDestroyed

D. onMounted

Solution

1. Step 1: Understand the lifecycle phases

   The onMounted hook runs after the component is inserted into the DOM.

2. Step 2: Match the hook to the action

   Since the question asks for the hook that runs right after adding to the page, onMounted is the correct choice.

3. Final Answer:

   onMounted -> Option D

4. Quick Check:

   Mounted = after insert [OK]

Hint: Remember: mounted means component is on the page [OK]

Common Mistakes:

• Confusing onMounted with onCreated
• Thinking onUpdated runs after mounting
• Using onDestroyed for setup tasks

2. Which of these is the correct way to import and use the onUnmounted hook inside the setup() function?

easy

A. import onUnmounted from 'vue';setup() { onUnmounted(() => { /* cleanup */ }); }

B. import { onUnmounted } from 'vue';setup() { onUnmounted(() => { /* cleanup */ }); }

C. import { onUnmounted } from 'vue';setup() { onUnmounted = () => { /* cleanup */ }; }

D. import { onUnmounted } from 'vue';setup() { onUnmounted; }

Solution

1. Step 1: Check import syntax

   The correct import uses curly braces: import { onUnmounted } from 'vue';

2. Step 2: Check usage inside setup

   The hook is called as a function with a callback: onUnmounted(() => { /* cleanup */ });

3. Final Answer:

   Correct import and call syntax -> Option B

4. Quick Check:

   Import with braces + call hook [OK]

Hint: Import hooks with braces and call them as functions [OK]

Common Mistakes:

• Importing without braces
• Assigning hook to a variable instead of calling
• Calling hook without a callback function

3. What will be logged to the console when this Vue component runs?

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    onMounted(() => {
      count.value = 5;
      console.log('Mounted count:', count.value);
    });
    return { count };
  }
}

medium

A. Mounted count: 5

B. Mounted count: 0

C. Mounted count: undefined

D. No output

Solution

1. Step 1: Understand ref and onMounted

   count starts at 0, then inside onMounted it is set to 5 and logged.

2. Step 2: Predict console output

   The console logs 'Mounted count:' followed by the updated value 5.

3. Final Answer:

   Mounted count: 5 -> Option A

4. Quick Check:

   Value updated before log in onMounted [OK]

Hint: onMounted runs after setup, so updated values show [OK]

Common Mistakes:

• Assuming count is still 0 inside onMounted
• Thinking onMounted runs before setup returns
• Confusing ref.value with ref itself

4. Identify the error in this Vue Composition API code snippet:

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted = () => {
      console.log('Mounted');
    };
  }
}

medium

A. onMounted is incorrectly assigned instead of called

B. Missing import of onUnmounted

C. setup() should return a value

D. Console.log syntax is wrong

Solution

1. Step 1: Check how onMounted is used

   The code assigns a function to onMounted instead of calling it with a callback.

2. Step 2: Understand correct usage

   The correct usage is onMounted(() => { ... }), not assignment.

3. Final Answer:

   onMounted is incorrectly assigned instead of called -> Option A

4. Quick Check:

   Hooks are called, not reassigned [OK]

Hint: Use onMounted(callback), don't assign it like a variable [OK]

Common Mistakes:

• Assigning hook instead of calling it
• Forgetting to pass a function to onMounted
• Thinking setup must always return something

5. You want to fetch data when a component mounts and cancel a timer when it unmounts using Composition API. Which code snippet correctly uses lifecycle hooks to do this?

hard

A. import { ref, onUnmounted } from 'vue';
export default {
setup() {
const data = ref(null);
let timer = setInterval(() => console.log('tick'), 1000);
onUnmounted(() => {
clearInterval(timer);
});
return { data };
}
}

B. import { ref, onMounted } from 'vue';
export default {
setup() {
const data = ref(null);
onMounted(() => {
fetch('/api/data').then(res => res.json()).then(json => data.value = json);
setInterval(() => console.log('tick'), 1000);
});
return { data };
}
}

C. import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const data = ref(null);
let timer;
onMounted(() => {
fetch('/api/data').then(res => res.json()).then(json => data.value = json);
timer = setInterval(() => console.log('tick'), 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
return { data };
}
}

D. import { ref } from 'vue';
export default {
setup() {
const data = ref(null);
fetch('/api/data').then(res => res.json()).then(json => data.value = json);
let timer = setInterval(() => console.log('tick'), 1000);
return { data };
}
}

Solution

1. Step 1: Check data fetching on mount

   import { ref, onMounted, onUnmounted } from 'vue';
   export default {
     setup() {
       const data = ref(null);
       let timer;
       onMounted(() => {
         fetch('/api/data').then(res => res.json()).then(json => data.value = json);
         timer = setInterval(() => console.log('tick'), 1000);
       });
       onUnmounted(() => {
         clearInterval(timer);
       });
       return { data };
     }
   }

   uses onMounted to fetch data and start the timer, which is correct.

2. Step 2: Check cleanup on unmount

   import { ref, onMounted, onUnmounted } from 'vue';
   export default {
     setup() {
       const data = ref(null);
       let timer;
       onMounted(() => {
         fetch('/api/data').then(res => res.json()).then(json => data.value = json);
         timer = setInterval(() => console.log('tick'), 1000);
       });
       onUnmounted(() => {
         clearInterval(timer);
       });
       return { data };
     }
   }

   uses onUnmounted to clear the timer, preventing memory leaks.

3. Final Answer:

   Correctly uses onMounted and onUnmounted hooks -> Option C

4. Quick Check:

   Fetch on mount + cleanup on unmount [OK]

Hint: Use onMounted for setup, onUnmounted for cleanup [OK]

Common Mistakes:

• Starting timers outside lifecycle hooks
• Not clearing timers on unmount
• Fetching data outside onMounted