Creating a Functional Component in Vue.JS

A Functional Component is one of Vue.js's features and is an option for how we can write our 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 discusses functional components, what they are, why they're important, 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 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 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 state-using applications. But they are crucial since they clarify and improve the readability of your code. It can also increase the performance of your code.

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 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.

How to Create a Functional Component

When creating a functional component, we must put the keyword functional in our template or script for it to become one.

We can check out the syntax below.

<template functional>
  <div><button>Submit</button></div>
</template>

To define a functional component, you must create a functional object: 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 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 we are 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, 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 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. The functional component is 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 is easy to determine when to use this method once you know what you want to accomplish with your program. 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 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 created an example of this feature to help you understand its significance, when you should use it, and how to create one.