One of VueJS's features is functional components, which is another option for how we can write our components. It allows us to design stateless components quickly. If you are a developer who is particularly concerned with performance or works on large projects, you might want to start designing functional components.
Functional components are a good feature to use, but there are a few things you need to understand before you start using them. This post will discuss functional components, why they're important, how to create one, and when to use them.
Table of Content
- What is a Functional Component?
- Importance of Functional Component
- Creating a Functional Component
- When should you use a Functional Component?
- Conclusion
What is a Functional Component?
A functional component is a Vuejs component that only has one file and doesn't store any state or instances. This only indicates that there isn't any ability for the keyword to operate as a self-reference. As opposed to 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 itself is not reactive because the data you pass down as a prop will still render the component correctly.
Functional Component Importance
Most developers dislike building functional components because they can't be used in state-using applications. But the functional component is crucial since it clarifies and improves the readability of your code. In addition, it can increase the performance of your code and keep it simple.
Since functional components don't have a state and don't need additional initialization for things like the Vue reactivity system, they are simple to deal with. They still respond to changes when a new prop is being passed, but this will only be within its main components because they don't keep track of their state and are unaware of when changes are made.
Creating a Functional Component
When creating a functional component, we must put the keyword functional in our template or script for it to become a functional component. We can check out the syntax below.
<template functional>
<div><button>Submit</button></div>
</template>
To define a functional component, you must create an object functional: true property and a render function
export default {
functional: true,
render(h) {
}
};
That's an example of how the functional component syntax work. Now let's look at a real code example:
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 on the browser.
We will create a component named ListItem.vue inside our component folder and paste the code below inside 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 creating a functional component, we will add the keyword functional to our template tag. Next, we create a loop using the v-for element to iterate through the list of our shopping items and pass the items through props and print out the result
<script>
export default {
functional: true,
name: "ListItem",
props: {
items: Array,
},
};
</script>
In the above example, we add the functional 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>
Moving forward, 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. The functional component is elementary and easy to adopt in our application when working on a project that doesn't require complex logic.
When should you use a Functional Component?
It can be a little difficult to determine when to use this method, but it becomes easy once you know what you want your program to accomplish for you. If your component needs basic features like taking in only props, statelessness, code readability, simplicity, and performance. You might use a functional component.
One unique thing I love about functional components is that they don't have reactive data. They do not use processes, cycle through events, or watch how their data changes in response to them. But even so, the performance is excellent.
Conclusion
There are instances when we may desire to create software without complicated components, a state of its own, or a lot of logic. A functional component is the best strategy to apply in situations like this because of its simplicity. In this illustration, we discussed the idea of a functional component, why it is significant, when you should use it and how to create one.
