HOCs vs Hooks. What to use and why?

Quick summary

In this tutorial, we will see how to refactor a higher order component into a custom hook and the main benefits and caveats of using one over the other.

Recently I published a little tutorial about Higher Order Components. I consider that an important topic since it's widely asked in job interviews and is still used in many applications.

A fellow developer read the article and kindly suggested I talk about the pros and cons of using them and how hooks replace the need for HOCs, so here we go!

A little talk about hooks

On February 16, 2019, React 16.8 was released to the public. The one with hooks was the main description given to that release.

Since then, an extensive discussion has arisen about whether or not hooks will replace common React patterns.

It was a relief for many since we already preferred to use functional components over class components. It allowed for the development of easier to read, easier to write, and easier to test components, and many of us switched to that pattern in no time.

Since then, I haven't touched a class component, and honestly, I'm very glad.

What are higher order components?

A HOC is a component that takes one or more components as props and returns new components.

HOCs can easily allow you to reduce the amount of duplicate logic on your application. Let me show you an example:

If you don't understand what's happening there I really encourage you to check my tutorial about Higher Order Components.

Anyway, let's break out that code to understand it.

You can see that I created a HOC called withData, which accepts a child component.

When the HOC mounts, it fetches data from the pokemon API and returns the child component with an appended prop containing the fetching results.

Then we have the ListResults component, which takes a results prop and renders an unordered list with it.

Refactoring into a custom hook

Look at this code:

So here, you can see that we created a custom hook called useData, which fetches from the API and returns the results.

Our ListResults component can then use it to get some data and render it in a list.

Wrapping Up

I like to keep my articles simple to help new developers understand concepts like this. This could involve deeper topics, patterns, and principles that we can cover if you want, but for the sake of simplicity, allow me to conclude.

HOC is just a pattern, which means that it's not written in stone that you have to use class components to write them.

Hooks give us the ability to handle state and side effects in our functional components and our functional-based HOCs, but if you're like me and prefer to use functional components and your HOC uses hooks to work, why not create a custom hook instead?

This will not be the case every time, but hopefully, this tutorial gives more clarity when deciding if you need a HOC or a custom hook.

This article was first published on devcore.io. go check it out!