A Functional Component is a Vue.js feature and an option for how we can write components.
It allows us to design stateless components quickly. If you are a developer concerned with performance, you might want to start developing this Vue.js feature.
Before you start using functional components in Vue.js, there are a few things you need to understand.
This post covers functional components: what they are, why they matter, how to create one, and when to use them.
What is a Functional Component?
A functional component is a Vue.js component that only has one file and doesn’t store any state or instances.
This only means the keyword can’t operate as a self-reference. Unlike our components, which re-render when we modify the template, data objects, and properties because they are part of the reactivity system.
But this does not mean the component is not reactive because the data you pass down as a prop will still render it correctly.
Functional Component Importance
Most developers dislike building functional components because they can’t be used in applications that use state. However, they are crucial because they clarify and improve code readability. They can also increase the performance of your code.
Since functional components don’t have state and don’t need additional setup for things like Vue’s reactivity system, they are simple to work with.
They still respond to changes when a new prop is passed, but only within their main components, since they don’t track state and aren’t aware of when changes are made.
How to Create a Functional Component
To create a functional component, we must use the keyword functional in our template or script.
Check out the syntax below.
<template functional>
<div><button>Submit</button></div>
</template>
To define a functional component, you must create a functional object: a true property and a render function.
export default {
functional: true,
render(h) {
}
};
That’s an example of how the functional component syntax works. Now let’s look at a real-world code example.
Real-world Code Example
In this code example, we’ll build a simple shopping application that iterates through a list of items and prints out the list of those items in the browser.
We will create a component named ListItem.vue inside our component folder and paste the code below into the file
<template functional>
<section id="shopping-app">
<div class="shopping-list-item">
<div class="container-text">
<div class="text">
<h1>Shopping List</h1>
</div>
</div>
<div class="list">
<p v-for="item in props.items" :key="item">{{ item}}</p>
</div>
</div>
</section>
</template>
Since we are creating a functional component, we will add the keyword functional to our template tag.
Next, we create a loop using v-for to iterate through the list of shopping items, pass the items through props, and display the result.
<script>
export default {
functional: true,
name: "ListItem",
props: {
items: Array,
},
};
</script>
In the above example, we add the function keyword to our script tag and pass our items as an array, and we can access our Props through props in the functional component
Next, we will create our list of items and reference our props:
<template>
<div id="app">
<ListItem
:items="[
'Surface Laptop 2',
'Google Pixel 4xl',
'Sony 1000xm4',
'Desk Lamp',
]"
>
</ListItem>
</div>
</template>
Next, we will import our ListItem.vue component inside our script tag in our App.vue file.
<script>
import ListItem from "./components/ListItem.vue";
export default {
name: "app",
components: {
ListItem,
},
};
</script>
Let’s check out our code output:
That is the final output of our shopping list items. Functional components are easy to adopt in our application when a project doesn’t require complex logic.
When should you use a Functional Component?
It is easy to decide when to use this approach once you know what you want to accomplish. Use this feature when your component needs basic features like taking in only props, statelessness, code readability, simplicity, and performance.
One unique thing I love about functional components is that they don’t have reactive data. They don’t use processes, cycle through events, or watch how their data changes in response. Even so, performance is excellent.
Conclusion
There are times when we may want to create software without complicated components, its own state, or much logic.
A functional component is the best strategy to apply in situations like this because of its simplicity. In this illustration, we created an example of this feature to help you understand its significance, when you should use it, and how to create one.
