React Hooks
A new feature from version 16.8.0, one of the most hyped topics as 2019 kicks off.
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
- Execute functions when the component is mounted and when dismounted
- Add to context API more easily to reflect the changes in a functional component
- Create your own abstractions that play with the lifecycles of React and use them as functional 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.
Now the same components with Hooks. Also, notice that everything with the same meaning remains grouped, facilitating the understanding of the code:
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.
