Today, I was trying to read up and understand more about Vue and its different components. As I was reading through, I was taken taken to realized i never knew the difference between the different components that were used. Even as a Frontend Vue.js developer myself, I never knew what are the terms of the different components I had created. But that confusion ends today. Mainly in this post, we will be talking about three different types of components in this post, namely: Functional components, Abstract components, stateful components; And what are their purposes and thereupon understand when would be most appropriate to use them.

What are functional components

Functional or stateless components are ‘eager’ means the component’s render function gets called directly. Also, these components are always re-rendered during their parent’s render life cycle without creating an instance of the component. This may be a performance win when used in large quantity, or as leaf components where these components do not have any child components.

However, without an instance, no Memoization can be performed for optimization since there’s no previous render state to watch. We can lose out if these functional components starts to become more complicated and child components becomes stateful. If you wish to create a component as functional, you have to indicate with a variable “functional: true”.

What are abstract components

Abstract components are like normal components, except they don’t render anything to the DOM. They just add extra behavior to existing ones. You can use abstract components to track user behaviors, such as whether a component enters a user’s viewport. You can declare a vue component with just a variable: “abstract: true" along with a render function.

Examples of abstract Vue.js components: transition, pre-fetch, component.

Reference: alligator.io

What are stateful components

Stateful components are components with their own local state and functions. These functions are used to update the state of the component. These stateful components are useful if they are one-off in which we can optimise with the presence of a component instance.

Hope this short simple article can help you to understand the different components that frontend frameworks utilize. Hope you will find this article useful with some links attached for a better understanding.

Reference: blog.webf.zone\

Source image: rangleio.ghost.io