19/4/2020 Evan You on Functional Components - Advanced Components | Vue Mastery

Evan You on Functional Components

In the previous lesson we learned about functional components. In this bonus lesson with Evan You,
the creator of Vue, he explains the power of functional components and its use-cases.

Why Functional Components are Powerful

Evan explains how functional components are cheaper to render because they don’t have a Vue
instance associated with them. Rather than creating a new Vue instance, they create an extra Virtual
Node.

Let’s say we have 100 items on a list on our webpage, each consisting of 3 base button components
(Ex. could be show/edit/delete). This could add up to 300 Vue instances. If we refactor the base button
components to be functional components, we save 300 instances from being instantiated, which in
turn means less javascript to execute and less memory to allocate (everything runs faster).

Major Use Cases

Evan specifies two major use-cases for functional components:

1. Cheap leaf components that can be reused without the cost of instantiation stateful component
(like above).
2. Functional wrapper components.

As we saw in the previous lesson, a functional wrapper component helps us delegate to other
components programmatically. Evan points out a great example of a functional wrapper component in
the Vue-Router library, the router-view. This functional component looks at the current route and
decides which component to render.

https://www.vuemastery.com/courses/advanced-components/evan-you-on-functional-components 1/1