# Functional Components

## Overview

In terms of what has changed, at a high level:

• Performance gains from 2.x for functional components are now negligible in 3.x, so we recommend just using stateful components
• Functional components can only be created using a plain function that receives props and context (i.e., slots, attrs, emit)
• DEPRECATED:functional attribute on single-file component (SFC) <template> is deprecated
• DEPRECATED:{ functional: true } option in components created by functions is deprecated

## Introduction

In Vue 2, functional components had two primary use cases:

• as a performance optimization, because they initialized much faster than stateful components
• to return multiple root nodes

However, in Vue 3, the performance of stateful components has improved to the point that the difference is negligible. In addition, stateful components now also include the ability to return multiple root nodes.

As a result, the only remaining use case for functional components is simple components, such as a component to create a dynamic heading. Otherwise, it is recommended to use stateful components as you normally would.

## 2.x Syntax

Using the <dynamic-heading> component, which is responsible for rendering out the appropriate heading (i.e., h1, h2, h3, etc.), this could have been written as a single-file component in 2.x as:

// Vue 2 Functional Component Exampleexportdefault{  functional:true,  props:['level'],  render(h,{ props, data, children }){return h(h${props.level}, data, children)}} Or, for those who preferred the <template> in a single-file component: // Vue 2 Functional Component Example with <template><template functional><component:is="h${props.level}"    v-bind="attrs"    v-on="listeners"/></template><script>exportdefault{  props:['level']}</script>

## 3.x Syntax

### Components Created by Functions

Now in Vue 3, all functional components are created with a plain function. In other words, there is no need to define the { functional: true } component option.

They will receive two arguments: props and context. The context argument is an object that contains a component’s attrs, slots, and emit properties.

In addition, rather than implicitly provide h in a render function, h is now imported globally.

Using the previously mentioned example of a <dynamic-heading> component, here is how it looks now.

## Next Steps

For more information on the usage of the new functional components and the changes to render functions in general, see: