Why Functional components in Vue? - Purpose & Use Cases

The Big Idea

Discover how tiny, fast components can make your Vue app feel lightning quick!

The Scenario

Imagine building a Vue app where every small UI part needs its own component, but you write full component code with data, methods, and lifecycle hooks even for simple display parts.

The Problem

This approach makes your code bulky and slow because Vue has to manage extra overhead like reactivity and lifecycle for components that just show static content or simple props.

The Solution

Functional components let you write lightweight, stateless components that only render UI based on props, making your app faster and your code cleaner.

Before vs After

✗ Before

<template><div>{{ message }}</div></template>
<script>export default { props: ['message'], data() { return {}; }, methods: {}, mounted() {} }</script>

✓ After

export default {
  functional: true,
  props: ['message'],
  render(h, { props }) {
    return h('div', props.message)
  }
}

What It Enables

It enables building fast, simple UI pieces without unnecessary overhead, improving app performance and developer productivity.

Real Life Example

Think of a button component that only shows a label and triggers a click. Using a functional component makes it super light and quick to render everywhere.

Key Takeaways

Functional components are simple, stateless, and faster.

They reduce code size by skipping lifecycle and reactivity.

Perfect for small UI parts that just display props.