React Hooks: Definitive Guide

Do you ever scroll down your Facebook feed when all of a sudden, a button pops up, notifying you of new posts? Well, in this case, you’ve had first-hand experience with React. React came about in 2011 as a result of relentless attempts of Facebook to perfect the user experience of the Facebook application. It was released into the public two years later as an open-source JavaScript library used for building single-page and mobile applications and became quite a widespread programming language. Since then, fixes and improvements are being added multiple times a year with each consecutive release. One such addition was React hooks, which seems to have had a significant impact on app development and to this day remains a trendy topic. Let’s take a closer look and find out why that’s the case.  

React hooks were introduced in React 16.8 as a way to assign certain features to function components without the need to introduce classes. Function components were known as function stateless components before, as using state was primarily a characteristic available in class components. This means that in the past you would have to rewrite these components as classes, spending a lot more time and bulking up the code as a result. However, with the introduction of hooks in React, that has changed.

Why React Hooks?  

Since its initial release in 2013, React steadily grew in popularity and, by the time hooks were released in 2018, established itself as the most loved front-end framework for Web applications in the JavaScript ecosystem. Why the need for the change then?

Primarily hooks were designed to use stateful components without the need to introduce classes. Classes are confusing for both people and machines. The introduction of classes into your code requires a lot of writing and the logic might not always be straightforward. With classes you had to remember to call super(props) and bind methods in the class constructor. This might seem like a minor nuisance, but if it becomes part of your day-to-day life and takes up a significant chunk of your time at some point, you’ll have to start asking yourself if it’s really the best way to write code. New releases tried to handle this by introducing class fields and later higher-order components (HOC). However, it not only didn’t eliminate all the issues but resulted in new problems like over-wrapping of components and issues following the logic. 

React was in need of a new concept. Something to encapsulate all the functionality they were lacking with HOCs and render props. This is how React hooks came into existence. In no way does this mean that hooks are there to replace classes, higher-order components, and goodness knows what else. You can still use whatever you prefer depending on the project and your immediate need. However, you can’t deny that it’s nice having a choice for once. 

A few built-in hooks are already available in React. You can make your own custom hooks as well. The most used are useState and useEffect, that are used to control states and side-effects in React respectively. Some other hooks are useContext (which, alongside useState and useEffect, is one of the three basic hooks), useReducer, useMemo, and useRef to name a few.

useState Hook

This is one of the basic hooks, used for adding state in functional components. Previously, if you wrote a function component and decided to add a state to it, you would’ve had to rewrite it as a class. Now, you can do that with the help of useState hook by calling it directly inside your component.

useEffect Hook

Another one of the basic hooks, useEffect is used for side-effects and is in a way a combination of componentDidMount, componentDidUpdate, and componentWillUnmount. This hook tells React what the app needs to do after rendering and determines its communication with the end user. 

Rules of Hooks  

When using hooks, you need to adhere to some rules for them to work properly. Basically, there are two rules to using hooks in React.

• Only call hooks at the top level. Hooks can’t be called inside loops, conditions, or nested functions. This ensures that hooks are called in the proper order and work correctly. React relies on the order in which the hooks are called so it’s important to maintain the same order of calls on each render. Placing hooks inside loops or conditions may disrupt said order and the code won’t give you the desired result.

• Only call hooks from React functions. If calling hooks from regular JavaScript functions as opposed to React functions, you might disrupt stateful logic in a component.

Creating custom hooks  

One of the benefits of using hooks in React is that you can take them as a basis for your own custom hooks expanding the functionality and adding new features to your code. A custom hook is a JavaScript function that starts with use and calls on already existing hooks, extracting the component logic into a new function. Custom hooks allow you to reuse state logic, write cleaner code and avoid repetition. 

Pros and Cons  

So, it may seem like with the introduction of hooks, React has made it easier to write a concise and clear code without any unnecessary elements to it. But, as it’s usually the case, all newly adopted functions or features, hooks have their pros and cons. Let’s look at some of them. 

Pros  

• Simple and efficient  
• Easy to write, test and maintain  
• Allow creating re-usable components  
• Reduce nesting  

Cons  

• Need to be applied correctly. In case of a mistake, it’s harder to trace it down and correct it, as hooks are called and realized in a stack system.  
• You can’t call on hooks in class-based components so introducing hooks into older projects is complicated and expensive as it requires rewriting a lot of the code. It only makes sense to use hooks in new projects.

So, as you can see, the pros significantly outweigh the cons. As long as you are careful and precise about how you use them, hooks can be a valuable asset in most Reactprojects.

Summary  

In conclusion, we can all agree that React hooks are a great addition to the React framework. They remain on top of the popularity poll even two years after the initial release. If used correctly, hooks make your code clean and slick, reduce overstacking of components, thus making the code easy to follow. So, consider experimenting with them in your next project. Who knows? You might like it and make React hooks a staple tool in your coding.

You should understand that hooks aren’t just another level of abstraction, commonly prevalent nowadays syntactic sugar, or an additional wrapper for your code. No, it’s a fundamentally new approach. Don’t think of them as a replacement for the lifecycle, or a way to use state in functional components. This is like trying to find an exact equivalent of a word in another language: it’s not always possible to transmit the semantic connotation of the word. Hooks don’t use classes – that’s the main idea behind the concept and the motivation that the React team had in mind when creating hooks.

You can say that it’s a more declarative approach as opposed to imperative. The React team wanted to change the way you think when coding in React: perceive render not as an update but a completely new set of data for components. It doesn’t matter if we went through a complete lifecycle or just a re-render – in both cases, hooks will produce a completely new environment. So, you could say that the main strongpoints and benefits to using hooks will be uncovered once you change your approach to coding. 

YURIY KOVALCHUK, SENIOR REACT DEVELOPER AT SYMPHONY SOLUTIONS