Functional components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue functional component render?

Consider this Vue 3 functional component using the Composition API. What will it render when used?

Vue

import { h } from 'vue'

const FunctionalComp = (props) => {
  return h('button', { type: 'button' }, `Click me ${props.name}`)
}

export default FunctionalComp

A <button type="button">Click me</button>

B <button>Click me Alice</button>

C <button type="button">Click me Alice</button>

D <div>Click me Alice</div>

💡 Hint

Look at the element type and attributes created by the h function.

The functional component returns a button element with type="button" and text including the name prop. So option C matches exactly.

❓ state_output

intermediate

What is the output of this functional component with reactive state?

Given this Vue 3 functional component using ref inside, what will it render initially?

Vue

import { ref, h } from 'vue'

const FunctionalCounter = () => {
  const count = ref(0)
  return h('div', `Count is ${count.value}`)
}

export default FunctionalCounter

A <div>Count is undefined</div>

B <div>Count is [object Object]</div>

C <div>Count is</div>

D <div>Count is 0</div>

💡 Hint

Remember to access the value of a ref with .value.

The count is a ref initialized to 0. Accessing count.value gives 0, so the rendered text is 'Count is 0'.

📝 Syntax

advanced

Which option correctly defines a Vue 3 functional component with props?

Choose the correct syntax for a Vue 3 functional component that accepts a title prop and renders it inside an h1 element.

A const MyFuncComp = (props) => h('h1', {}, props.title)

B const MyFuncComp = (props) => h('h1', props.title)

C const MyFuncComp = ({ title }) => h('h1', title)

D const MyFuncComp = (props) => h('h1', { innerHTML: props.title })

💡 Hint

Remember the h function signature: h(tag, props?, children?).

Option A correctly passes an empty props object and the title as children text. Option A and B pass the title as props, which is incorrect. Option A uses innerHTML which is not recommended here.

🔧 Debug

advanced

Why does this Vue 3 functional component cause a runtime error?

Examine this functional component code. Why does it cause an error when rendered?

Vue

import { h } from 'vue'

const BrokenFuncComp = (props) => {
  return h('p', props.message.toUpperCase())
}

export default BrokenFuncComp

A h() requires three arguments but only two are provided

B props.message is undefined causing a TypeError when calling toUpperCase()

C Functional components cannot use props directly

D The component must return a template string, not h() calls

💡 Hint

Check if props.message is always defined before calling string methods.

If props.message is missing or undefined, calling toUpperCase() causes a TypeError. The h function usage is correct.

🧠 Conceptual

expert

What is a key advantage of Vue 3 functional components over regular components?

Choose the best explanation of why you might use a functional component in Vue 3.

A They have no reactive state or lifecycle, so they render faster and use less memory

B They automatically cache all props and prevent re-renders

C They allow using class-based syntax for better organization

D They enable two-way binding without emitting events

💡 Hint

Think about what makes functional components lightweight compared to stateful ones.

Functional components are stateless and have no lifecycle hooks, so they are simpler and faster to render. Other options describe features not related to functional components.