React Hooks

A new feature from version 16.8.0, one of the most hyped topics as 2019 kicks off.

Fish hook via AntanO

What is React Hook?

React Hook is a feature that allows you to use state and other React features without the necessity of writing a class. With React Hook you’ll be able to:

  • Use state in functions that are components

Why were Hooks made?

Hooks were intended to resolve three problems that frequently occurred, in the language Javascript as much as in the React lib.

First motive: It’s hard to reuse logic between components.

If you already use React you’ve probably noticed that you have to repeat yourself nearly a thousand times in order to duplicate logic, such as connecting to a state provider (connect in Redux for example).

The best way to reuses logic is to constantly use High Order Components or create Render Props all the time in order to avoid writing tons of code, and even then you have to keep creating your own High Order Components. This partially resolves the problem, but you still end up creating a component where you have no need for it just so you can communicate with a component already encompassed by your HoC.

React focuses on DX (Developer Experience) quite a bit, so there’s an abundance of tools there to help developers. Using HOCs excessively might interfere with these, which you can see in the following example where we inspect an element that uses lots of High Order Components.

Real easy to debug, right?

In addition to obscuring what we really want to see, we need to unnecessarily keep in mind a bunch of components to communicate with our HOCs.

Second Motive: Complex components end up being difficult to understand

Imagine that you have a complex component that deals with things that aren’t related to your component. For example, your component needs to initiate three timers that work at different times and also has to stop these timers when the component is done being assembled.

Check out the following example:

Observe that the creation of a stopping point for each timer pollutes the code, now imagine that the component needs to realize this same operation for 2o timers.

Isn’t there a better way to do this? Hooks have a much more efficient way of arriving at the same outcome.

Third motive: Classes confuse.

Javascript constructs prototype-based classes, meaning that classes in Javascript don’t work the same way as the majority of the languages we see on the market like Java, C#, Ruby…

When you use the word Class (that was introduced in ES6) in your code you’re using a prototype (albeit masked), since Class is just syntax sugar (that’s right, it’s just a little more pretty) for a prototype. Consequently, classes don’t work as hoped.

When we use classes we end up using this a great deal, which also creates confusion, because the command works differently in other languages. Check out the example below:

Here it works, but what if we used this in a different way?

Here we run into an error since this gets stuck in the past context of the function passed through forEach, and in this prototype of the function it wasn’t possible to find the property name.

Aside from problems with prototypes, classes also present problems for the tools we use with React, since they don’t minify as well as functions. Additionally, they present problems for hot reloading, turning unreliable and in some cases even impossible.

How do they resolve these problems?

Now that the problems we run into have been made clear, we’re going to take a look at how Hooks solve these problems.

With Hooks we only use functions and even though they are functions that we import directly from React, we only use functional components in order to get rid of classes.

Here we have an example of a component using the hook UseState:

See? Only functions. We don’t need to create our state inside a class constructor, and we also don’t need to be careful about the use of this to know if, for example, this.setState or this.state are in the right place.

Complex components become much simpler, and we are able to reuse logic much more. Compare these two components where the text in black becomes unnecessary, the state in blue, the api context in green, and in yellow the side effects.

https://twitter.com/threepointone/status/1056594421079261185

Now the same components with Hooks. Also, notice that everything with the same meaning remains grouped, facilitating the understanding of the code:

https://twitter.com/threepointone/status/1056594421079261185

Unbelievable, isn’t it?

All of this will enable developers by causing less confusion, facilitating the creation and refactoring of components as well as tools, because previously the hot reload wasn’t able to replicate the code that existed inside the constructor, allowing minify to minificate even more now.

Should I use hooks?

Definitely! You don’t need to refactor all your classes to change your entire codebase, especially if you don’t already have tests, then it really wouldn’t be a good idea. Since Hooks can coexist with classes, it’s not a problem if your new components use classes and the old ones stay as classes.


Interested in working with us? We’re always looking for people passionate about technology to join our team! You can find our openings here.

Interested in working with us? We’re always looking for people passionate about technology to join our team! You can find our openings here.

Creditas Tech

Our technologies, innovations, digital product management, culture, and much more!

Pedro Henrique Santiago

Written by

Software engineer @creditasbr

Creditas Tech

Our technologies, innovations, digital product management, culture, and much more!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade