Image

advanced-components

2 min read
Last update: December 19, 2021

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.