React Hooks: Definitive Guide
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?
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.
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.
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.
Creating custom hooks
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.
- Simple and efficient
- Easy to write, test and maintain
- Allow creating re-usable components
- Reduce nesting
- 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.
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.
YURIY KOVALCHUK, SENIOR REACT DEVELOPER AT SYMPHONY SOLUTIONS
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.