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.