Functional components in Vue - Step-by-Step Execution

Concept Flow - Functional components

Define functional component as a function

↓

Receive props as input

↓

Return render output (JSX or template)

↓

Vue renders output without internal state

↓

Component used in parent template

↓

Render output appears in DOM

Functional components are simple Vue components defined as functions that take props and return UI without internal state.

Execution Sample

Vue

import { h } from 'vue'

const Hello = (props) => {
  return h('div', `Hello, ${props.name}!`)
}

export default Hello

This code defines a functional component that renders a div greeting with the given name prop.

Execution Table

Step	Action	Input Props	Render Output	Notes
1	Call functional component	{ name: 'Alice' }	h('div', 'Hello, Alice!')	Props received as input
2	Return render output	{ name: 'Alice' }	h('div', 'Hello, Alice!')	VNode created for rendering
3	Vue renders VNode	N/A	Hello, Alice! shown in DOM	Output appears on page
4	Call functional component	{ name: 'Bob' }	h('div', 'Hello, Bob!')	Props changed to Bob
5	Return render output	{ name: 'Bob' }	h('div', 'Hello, Bob!')	VNode updated
6	Vue renders VNode	N/A	Hello, Bob! shown in DOM	DOM updates with new greeting
7	No internal state	N/A	N/A	Component is stateless, no reactivity inside
8	Exit	N/A	N/A	Rendering complete

💡 Rendering stops after output is created and shown; functional components do not hold state or lifecycle.

Variable Tracker

Variable	Start	After Step 1	After Step 4	Final
props	undefined	{ name: 'Alice' }	{ name: 'Bob' }	N/A
render output	undefined	h('div', 'Hello, Alice!')	h('div', 'Hello, Bob!')	VNode rendered in DOM

Key Moments - 2 Insights

Why doesn't the functional component have internal state or lifecycle methods?

Functional components are simple functions that only receive props and return UI. They do not create instances or hold state, as shown in execution_table rows 7 and 8.

How does the component update when props change?

When props change, the functional component is called again with new props (see step 4), returning new render output which Vue updates in the DOM (step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the render output at step 2?

A h('div', 'Hello, Alice!')

B Hello, Alice!

C <div>Hello, Alice!</div>

D undefined

💡 Hint

Check the 'Render Output' column at step 2 in the execution_table.

At which step does the component receive new props?

A Step 1

B Step 3

C Step 4

D Step 6

💡 Hint

Look for the step where props change from Alice to Bob in the execution_table.

If the component had internal state, which step would change in the execution_table?

A Step 2, because render output would be different

B Step 7, because state would be tracked

C Step 4, because props would not change

D Step 8, because rendering would never complete

💡 Hint

Refer to step 7 notes about internal state in the execution_table.

Concept Snapshot

Functional components in Vue are simple functions that take props and return UI.
They do not have internal state or lifecycle hooks.
They are called each time props change to produce fresh output.
Use them for simple, stateless UI pieces.
They improve performance by avoiding instance creation.

Full Transcript

Functional components in Vue are defined as plain functions that receive props as input and return a render output, usually a virtual node. They do not maintain internal state or lifecycle methods. When used in a parent template, Vue calls the function with current props and renders the returned output in the DOM. If props change, Vue calls the function again to update the UI. This makes functional components lightweight and efficient for simple UI parts.

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