Functional components in Vue - Performance & Optimization

Performance: Functional components

MEDIUM IMPACT

Functional components affect rendering speed and memory usage by reducing component overhead in Vue apps.

Rendering simple presentational UI without state or lifecycle

Vue

<script setup>
export default (props) => {
  return h('div', props.text)
}
</script>

Functional component is stateless and has no lifecycle, so it renders faster with less memory.

📈 Performance GainReduces component instance creation and reactive tracking, improving INP.

Rendering simple presentational UI without state or lifecycle

Vue

<script>
export default {
  name: 'BadComponent',
  data() { return { count: 0 } },
  template: `<div>{{ count }}</div>`
}
</script>

This uses a full component with reactive state and lifecycle, adding unnecessary overhead for static UI.

📉 Performance CostAdds extra memory and triggers more reactive tracking, increasing INP latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full component with state	More nodes due to reactive wrappers	Multiple reflows if state changes	Higher paint cost due to updates	[X] Bad
Functional component (stateless)	Minimal nodes, no reactive wrappers	Single reflow per render	Lower paint cost	[OK] Good

Rendering Pipeline

Functional components skip instance creation and lifecycle hooks, reducing work in the rendering pipeline.

→Template Compilation

→Virtual DOM Creation

→Patch & Update

⚠️ BottleneckComponent instance creation and reactive effect tracking

Core Web Vital Affected

INP

Functional components affect rendering speed and memory usage by reducing component overhead in Vue apps.

Optimization Tips

1Use functional components for simple, stateless UI to reduce rendering overhead.

2Avoid lifecycle hooks and reactive state in functional components to keep them lightweight.

3Functional components improve interaction responsiveness by reducing scripting time.

Performance Quiz - 3 Questions

What is the main performance benefit of using functional components in Vue?

A They avoid creating component instances and lifecycle hooks

B They automatically cache all rendered output

C They reduce CSS file size

D They preload data before rendering

DevTools: Performance

How to check: Record a performance profile while interacting with the component, then inspect component render times and reactive effect counts.

What to look for: Look for lower scripting time and fewer reactive effect triggers in functional components compared to full components.

Practice

1. What is a key characteristic of a functional component in Vue?

easy

A. It manages its own state and lifecycle hooks.

B. It requires a template section to render.

C. It can only be used with class-based components.

D. It is stateless and has no reactive data.

Solution

1. Step 1: Understand functional component basics

   Functional components in Vue are designed to be simple and stateless, meaning they do not hold reactive data or manage lifecycle hooks.

2. Step 2: Compare options with definition

   It is stateless and has no reactive data. correctly states that functional components are stateless. Options A, C, and D describe features not applicable to functional components.

3. Final Answer:

   It is stateless and has no reactive data. -> Option D

4. Quick Check:

   Functional component = stateless [OK]

Hint: Functional components do not hold state or lifecycle hooks [OK]

Common Mistakes:

• Thinking functional components have reactive state
• Assuming they use lifecycle hooks
• Confusing with class-based components

2. Which of the following is the correct syntax to define a functional component using the <script setup> syntax in Vue 3?

easy

A. <script setup functional>\nexport default { props: ['text'] }\n</script>

B. <script setup>\nimport { h } from 'vue'\nconst MyFuncComp = (props) => h('div', props.text)\n</script>

C. <script setup>\nexport default { functional: true, props: ['text'] }\n</script>

D. <script setup>\nconst MyFuncComp = (props) => <div>{props.text}</div>\n</script>

Solution

1. Step 1: Recall Vue 3 functional component syntax

   In Vue 3 with <script setup>, functional components can be defined as functions returning VNodes using the h helper.

2. Step 2: Analyze each option

   <script setup>\nimport { h } from 'vue'\nconst MyFuncComp = (props) => h('div', props.text)\n</script> correctly defines a functional component returning a div with text using h. <script setup>\nconst MyFuncComp = (props) => <div>{props.text}</div>\n</script> uses JSX-like syntax which is not default in Vue. Options B and C use options API syntax incorrectly inside <script setup>.

3. Final Answer:

   <script setup> import { h } from 'vue' const MyFuncComp = (props) => h('div', props.text) </script> -> Option B

4. Quick Check:

   Functional component = function returning VNode with h() [OK]

Hint: Use function returning h() in

Common Mistakes:

• Using options API inside
• Trying to use JSX without setup
• Missing h() helper for rendering

3. Given this functional component code, what will be rendered?

<script setup>
import { h } from 'vue'
const Greeting = (props) => h('p', `Hello, ${props.name}!`)
</script>

<template>
  <Greeting name="Alice" />
</template>

medium

A.

B. Hello, {name}!

C. Hello, Alice!

D. Error: Functional component must return a template

Solution

1. Step 1: Understand the functional component output

   The component Greeting is a function that returns a paragraph element with text including the passed prop name.

2. Step 2: Substitute the prop value

   When used with name="Alice", it renders <p>Hello, Alice!</p> as a normal HTML element.

3. Final Answer:

   <p>Hello, Alice!</p> -> Option C

4. Quick Check:

   Functional component renders HTML with props substituted [OK]

Hint: Functional components return rendered HTML with props values [OK]

Common Mistakes:

• Expecting JSX syntax output
• Thinking it returns raw component tag
• Assuming template is required

4. Identify the error in this functional component code:

<script setup>
const Button = (props) => {
  return <button>{props.label}</button>
}
</script>

medium

A. Using JSX syntax without proper setup causes an error.

B. Missing props declaration in options API.

C. Functional components cannot return elements.

D. The function should not use return statement.

Solution

1. Step 1: Check syntax used in functional component

   The code uses JSX-like syntax (<button>{props.label}</button>) inside a function without JSX support configured.

2. Step 2: Understand Vue default rendering

   Vue requires using h() helper or templates unless JSX is set up. Without JSX setup, this causes a syntax error.

3. Final Answer:

   Using JSX syntax without proper setup causes an error. -> Option A

4. Quick Check:

   JSX needs setup; otherwise use h() or template [OK]

Hint: JSX syntax requires special setup; otherwise use h() [OK]

Common Mistakes:

• Assuming JSX works by default
• Forgetting to import h()
• Thinking return statement is disallowed

5. You want to create a functional component that renders a list of items passed as a prop. Which code correctly implements this in Vue 3 using <script setup> and the h function?

hard

A. <script setup>
import { h } from 'vue'
const ItemList = (props) => h('ul', props.items.map(item => h('li', item)))
</script>

B. <script setup>
const ItemList = { functional: true, props: ['items'], template: '<ul><li v-for="item in items">{{ item }}</li></ul>' }
</script>

C. <script setup>
const ItemList = (props) => {
return <ul>{props.items.map(item => <li>{item}</li>)}

D. <script setup>
import { h } from 'vue'
const ItemList = (props) => h('ul', [h('li', props.items)])
</script>

Solution

1. Step 1: Understand how to render lists in functional components

   Using the h function, you can create an unordered list with list items by mapping over the items array and creating li elements.

2. Step 2: Analyze each option

   <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', props.items.map(item => h('li', item))) </script> correctly maps each item to an li element inside a ul. <script setup> const ItemList = { functional: true, props: ['items'], template: '<ul><li v-for="item in items">{{ item }}</li></ul>' } </script> uses options API incorrectly inside <script setup>. <script setup> const ItemList = (props) => { return <ul>{props.items.map(item => <li>{item}</li>)} uses JSX without setup. <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', [h('li', props.items)]) </script> incorrectly passes the whole array as a single li.

3. Final Answer:

   <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', props.items.map(item => h('li', item))) </script> -> Option A

4. Quick Check:

   Map items to li elements using h() inside ul [OK]

Hint: Map array to h('li', item) inside h('ul') for lists [OK]

Common Mistakes:

• Passing whole array as one li
• Using template syntax inside script setup
• Using JSX without setup