React, you have hooked me

React Hooks were implemented on the 16.8 version and they made the life of all developers easier. Why? Because we can reuse the logic and create readable code.

The first time I used it, I was amazed. I had used the previous version before and it had classes instead of functions, the code was way longer and it was 10x more complicated to reuse.

Using hooks is a best practice recommended by React because we can reuse the logic on different components, leading to the enhancement of the performance of the system and the developer, resulting in faster code and a more efficient system.

Most of the time, hooks exist to make everything easier, especially on the life cycle of a component and working with states.

I would rather use hooks instead of the old versions with classes — just because it is called “class” doesn’t mean it is classy. These are the essential React hooks for me:

• useState: It creates a variable which will control the component state. If we need another variable, we need to execute a new useState. The idea is that we can update the function with less code.
• useEffect: It is a hook that handles effects, replacing the older lifecycles componentDidMount, componentDidUpdate and componentWillUnmount. One thing we must have in mind with useEffect is that we can’t call setName multiple times inside the useEffect, because it will be in an infinite loop consuming memory leading to system failure. However, you can execute as many useEffects you want, which gives us more control regarding what and when the effects should be executed.
• useReducer: it is very similar to useState, however we can reuse it in other components while useState is local. It is more complex than useState.
• useRef: it is used to access a component, if we have two Text components and we need to access the properties of each we can use a useRef to access each one and thus manipulate its properties.

But what are the real advantages and disadvantages of hooks?

In my opinion, the only situation where we should use classes instead of hooks is when you already started a project with classes. The update of an ongoing project from class to hooks might be more stressful than just finishing the project with classes… But, don’t forget, when developing a new project, go for hooks!

We also recommend developing your own hooks besides the React natives — this means having more control over what you are creating, avoiding constant download, leaving the file less heavy for the final build on integrations with Redux or Context API.

At craftable, we develop boutique software always on top of the latest updates on technology for all our nearshore projects. That’s why we use hooks on our React projects — we rather work with typescript to have control on what we are working on for better organisation of our partners’ solutions. Get to know our software house at https://l.linklyhq.com/l/1P70q or visit us at our offices in the lovely cities of Porto or Aveiro!

React, you have hooked me was originally published in craftable on Medium, where people are continuing the conversation by highlighting and responding to this story.