We pump over development on Vue by means of patterns: HOC

The HOC (Higher Order Component) pattern is very popular with React developers. But Vue-developers somehow bypass it. Very vain. Let's try to figure it out.

What is HOC?

A higher order component (HOC) is a function that accepts an existing component and returns another component that wraps the original one, adding new logic.

HOC vs mixins

Perhaps many will wonder why using HOC when there are impurities? They also add new functionality to the components. What can HOC do not know how to admix?

First, recall what impurities are in Vue (the definition is taken from the Vue documentation):

Mixins is a flexible code reuse tool in Vue components. The impurity object can contain any component options. When using the impurity component, all impurity options are “mixed” into the component's own options.

It seems that the purpose of impurities and HOC is the same - they allow you to expand the functionality of different components. And outside (using the final component) it may even look the same.

But the difference lies in the very principle of operation of HOC and impurities. Impurities are “mixed in” when a component is declared - any instance of the component will contain them.
With HOC, we wrap an instance of a component without changing the component itself, but creating a new one, in the place where it is required. This means that we only affect the piece of code where we use it. Due to this we reduce the code connectivity, make it more readable and flexible.

HOC is a bit like a decorator design pattern.

Create HOC

Well. Let's look at all this with an example.

So, we have a component button:

After some time, we suddenly needed to log the press of some buttons (but not all). We can do this through impurities by mixing the code for logging into a component of a button, and then in the right place enable or disable logging through some property of the component. But agree, this is not very convenient? And if there is a lot of such functionality? One mistake - and all the buttons may stop working correctly.

HOC in this case would be a great solution. We will simply wrap the button in some places with the appropriate HOC.

It's time to learn HOC in practice.

Step 1. Create a HOC function.

We remember that HOC is a function that takes a component as input and returns another. So create the same function. Let's call it withLoggerButton.
Naming of HOC functions is usually started with with - it is a kind of identification mark of HOCs.

The result is a function that accepts a Button component as input, and then returns a new component. In the render function, we use the original component, but with one change - we add an event to click on the DOM node, the output to the console is the label clicked.

If you do not understand what is happening here, what h and context are, first read the vue documentation on the work of the render functions.

In the current example, I used exactly the functional component, since I do not need a state. Nobody forbids you to return a regular component instead of a functional one, but do not forget that functional components are much faster than normal ones.

Step 2. Use HOC

Now, using the obtained function, we simply create a new component.

It remains the case for small - to connect the received component where we need to log the clicks.

Final example:

Composition

All this is of course great, but what if you need a button that not only logs, but also performs some other action?

It's simple. We turn one hoc into another. We can mix as many HOCs as possible.

Also for the composition there are so many ready-made functions and libraries that facilitate the composition.

HOC is a simple, but at the same time very powerful pattern. It is used in the basis of many libraries. It is not a silver bullet or a complete replacement of mixins and the mechanism of inheritance of components. Use it wisely in combination with other patterns and your Vue applications will become truly flexible.

Cross post