React Hook Rules

Basic Rules For Using React Hooks

Like I always mention in every post about React, Hooks are amazing. But these are no stranger to the potential errors that come along with using them. That goes with any JS project development.

We have to use Hooks responsibly in order to enjoy the fruits of our coding labor that we tirelessly poured into a project. So, here are some basic rules to follow when using React Hooks -

Updated Versions of React and React DOM

Always make sure you are using the latest install to ensure compatibility before you get any further. Small details, such as these, could save you so much time and effort at the beginning of your project.

And if you find yourself in doubt, just reinstall all libraries with npm install or yarn install:-)

Top Level Use Only

Hooks allow developers to use state and other features without having to write a class (yay!). But KEEP IN MIND:

React relies on the order in which Hooks are called

-React Docs

WHAT DOES THIS MEAN?

Think about it — a developer could use multiple useState and useEffect Hooks within a single component. And sometimes developers need to create different use cases that depend on some type of if statement or a loop , etc.

Messy and confusing

That can get messy very quickly and can lead to bugs if the developer is nesting their Hooks instead of keeping them at top level. The React docs give a good example of this. Let’s take a look below:

Messy, incorrect way of utilizing the useEffect Hook

As stated in the quote above, the Hooks within the component are processed in order each and every time there is a rendering of the respective component.

Hook order helps to…

… correctly preserve the state of Hooks between multiple useState and useEffect calls.

-React Docs

“So, what is happening with the above code?”, you ask. Let’s break it down:

1. const [name, setName] = useState('Mary') — Nothing wrong here. The above code is properly using the useState Hook. The initial state of name is 'Mary'.
2. if (name !== '') {useEffect(function persistForm(){...}} — And here is the problem. The above code is running a condition BEFORE calling the useEffect Hook. If the condition is NOT met, it will NOT run the useEffect Hook at all. Read the code out loud, “If name does NOT strictly equal an empty string, run this code”. Which would work the first time when a user enters a name into the input, but what happens when the form gets CLEARED? This Hook will be SKIPPED and a bug will develop in the code.
3. const [surname, setSurname] = useState('Poppins') — FAILED. Let’s assume the form was cleared. React is looking for Hook #2 that pertains to the persistForm() function, and instead finds Hook #3.
4. useEffect(function updateTitle()) {...} — FAILED. The same goes for this one. React is looking for Hook #3 pertaining to the state of surname and instead finds Hook #4.

Solution

To prevent such mayhem from happening in your code, be sure to create Hooks top level. If the developer is needing to run a condition, create the Hook first, then create the condition inside the Hook. Such as with this example:

Hook #2 — Correct usage of useEffect

Call Hooks from React Functions Only

In other words, don’t attempt to use a React Hook within a class component.

WHAT DOES THIS MEAN?

Well, I’m glad you asked. And no, this is not a dumb question. The only dumb questions are the ones you don’t ask… The following code example shows a React Hook being utilized INCORRECTLY:

Incorrect usage of React Hooks

React Hooks are not designed to be used within class components. Remember, Hooks are functions that “hook into” state and lifecycle methods. Hooks give the flexibility to move up and down the component tree without changing the architecture or structure.

Don’t feel limited to only using function components because of Hooks. You can utilize both class and function components with Hooks within the same tree. If you are wanting to update some older projects, keep in mind that Hooks are 100% backwards-compatible.

Thanks for reading!