Hooks Deep Dive
We'll be taking a deep dive walkthrough of the most common Hooks in React, including their use cases and how to work with them.
React Hooks deep dive#
We’ve covered Hooks fairly lightly up to this point and mainly focused on the two most used, namely
In this module, we’re going to take a deeper dive into the available Hooks React provides out of the box.
Before we do that, however, there are a few things to note about Hooks from the official documentation:
They’re 100% opt-in. Even though Hooks’ use is quite widespread, you don’t have to use them. In fact, depending on the types of projects you end up tackling with React, you might come across class-based components which can’t use Hooks.
They’re 100% backwards-compatible. Hooks offer a separate layer to React to hook into React’s core functionality, but they don’t introduce any breaking changes. Again, depending on the projects you find yourself involved in, you may well see a mixture of class-based components and function-based components using Hooks as they are gradually adopted.
Classes aren’t in danger of lack of support. Facebook themselves have tens of thousands of components written using classes. They’re not likely to drop support for class-based components, so you don’t have to scramble to rewrite all your existing components.
Hooks don’t change React’s core concepts. Hooks allow us to use parts of React’s core features, such as state and the rendering lifecycle, outside of classes, but they don’t alter the concepts behind them. For example, whether you use the
this.state.xyzfrom a class, the fundamental principles and concepts of using state remain the same.
Rules of Hooks#
Just like the film Gremlins, there are rules to caring for and using Hooks. Fortunately, they’re not as complicated as looking after Gizmo and there are only two rules you have to be aware of:
Only call Hooks at the top level.
Only call Hooks from React Functions.
The first rule means that you can’t call Hooks from within loop blocks, conditional statements or nested functions.
As a quick example to hammer home the point, take a look at the following code:
Notice how in
useState Hook is called at the top level, so is an immediate descendant of the
GoodExample function. (Note that they don’t have to be physically at the top of the component, but this is good idea from a readability point of view). We call
setMyValue within a conditional
if statement, but this isn’t calling the Hook, merely a value or variable returned from the
BadExample, we’re declaring a variable and calling the
useState Hook inside of the conditional statement
if(props.anotherCondition), which violates Rule 1 of Hooks.
The second rule is short and simple: you can only use Hooks from React Functions, either function-based components or your own custom Hooks (which we’ll talk about in a moment).
I’m going to keep banging the drum for the official React documentation as it’s comprehensive, well-written, and a superb resource for beginners. It details the Hooks rules there too, and provides some instructions for setting up linting plugins, such as ES Lint, to watch out for and enforce these rules. Go check it out if you haven’t already!