A presentation on functional components in Vue.js

1. Functional Components in Vue.js

2. What is a
functional
component?

3. Functional components (not to be confused with Vue’s render functions) is a
component which holds no state and no instance.
In more plain English, this means that the component does not support reactivity
and cannot make a reference to itself through the `this` keyword.

4. Implementation: <template>

5. Implementation: render()

6. Without the state or instance,
you might wonder how you can
reference things like data or
methods. Fortunately, Vue
provides a “context” parameter
to the underlying render function.
This “context” argument is an
object with the following
properties:
● props: An object of the provided props
● children: An array of the VNode children
● slots: A function returning a slots object
● scopedSlots: (v2.6.0+) An object that
exposes passed-in scoped slots. Also exposes
normal slots as functions.
● data: The entire data object, passed to the
component as the 2nd argument of
createElement
● parent: A reference to the parent component
● listeners: (v2.3.0+) An object containing
parent-registered event listeners. This is an
alias to data.on
● injections: (v2.3.0+) if using the inject
option, this will contain resolved injections.

7. Accessing this “context” parameter is pretty straightforward. For example, if we
wanted to do something with props, it might looks like this:

8. Implementation: <template>

9. Implementation: render()

10. Why are
functional
components cool?

11. Functional components can make accessing your components a little more difficult to
work with or introduce some complexity, so why go through the hassle?
Speed.
Because functional components do not have a state, they do not require extra
initialization for things like Vue’s reactivity system. Functional component will still
react to changes like new props being passed in, but within the component itself,
there is no way for it to know when it’s data has changed because it does not
maintain its own state.
For a large application, you will see significant improvements to the DOM
render/update events after implementing functional components.

12. When would you
use functional
components?

13. Functional components are probably not right for most cases. After all, the point of
using a JavaScript framework is to build applications which are more reactive. In
Vue, you cannot do this without the reactivity system in place.

14. There are, however, some
excellent use cases to sprinkle in
functional components:
● A component which is simply presentational.
AKA, a “dumb” component. For example:
buttons, pills, tags, cards, even full pages with
just static text like an About page.
● A “higher order component” which is used to
wrap markup or basic functionality around
another component.
● Any time you find yourself in a loop (v-for),
the items in the loop are usually great
candidates.

15. Caveats

16. There is one small issue I’ve run into for a pretty specific use case. When using a
<template> tag, and accepting data through a prop, sometimes we want to modify
the data inside the template. With a standard Vue component, this is easy using
either methods, or computed props. With functional components, we do not have
access to methods or computed props. However, there is still a way to do this.
Let’s say our component accepts a “user” prop which is an object with “firstName”
and “lastName”, and we want to render a template that shows the user’s full name
(let’s just assume we don’t want to simply provide a “fullName” prop”.
In a functional <template> component, the way we could do this is by providing a
method right on our component definition, then use the $options property provided
by Vue to access our special method:

18. Conclusion
If you care about performance or ar working on very large applications, consider
getting in the practice of creating functional components. The small learning curve is
worth the performance gains.
References:
https://vuejs.org/v2/guide/render-function.html#Functional-Components
https://itnext.io/whats-the-deal-with-functional-components-in-vue-js-513a31eb72b0