Hook is a new feature in React 16.8 that lets you use state, lifecycle, and other React features without having to write classes.

However, as an advanced feature, React Hooks come with some Hook rules and considerations when used.

In this article, I discuss five common React Hooks errors to avoid when building React applications

Error 1: Change the order of Hooks calls

Use hooks only at the top level. Never call hooks in loops, conditions, or nested functions. Be sure to always call your React functions at the top level and before any returns. By following this rule, you can ensure that hooks are called in the same order every time you render. This allows React to keep the hook state correct between multiple useState and useEffect calls. (If you’re curious about this, we explain it in more depth below.)

The above is the actual quote from the official website. Let’s create a scenario to explain it.

I created a basic React component. The component has a drop-down list. Select a person from the list and display the person’s data.

At first glance, it looks perfect, but the console throws an error. Because useState and useEffect are not called before the first return. Take a look at the effect:

How to correct it? Think for three minutes…

In fact, it is easy to put the order of useState and useEffect at the top of the function body. Look at the picture:

Put the order of useState and useEffect calls at the top of the function body, and the console error disappears.

Mistake 2: Unnecessary re-rendering

In components, you can use useStateHook for state handling. While it is very simple, it can cause unexpected problems if not used properly.

For example, suppose a component has two buttons. The first button triggers a counter, and the second button makes a request based on the current counter state.

The above components worked fine, and the console reported no errors. However, since we didn’t use counter in the render phase, we get an unwanted re-render every time we click the counter button.

If you need a variable that holds the state value but does not trigger rerendering, useRef is a better choice. Improve the code:

Error 3: Using useEffect to process actions

Process a task after listening for prop or state changes using useEffect Hook. But, in some cases, it can make things more complicated.

For example, a component takes a list of data and renders it to the page

When the fetchPersons component is initialized, the first useEffect calls apiCall. Once all the conditions are met, the second useEffect calls the onSucces method.

It can be seen that apiCall and onSuccess are split into two hooks, which will cause two problems. One is that onSuccess cannot be triggered only after success, but the code readability is poor and it is difficult to maintain in the later stage.

The solution is to put onSuccess in the apiCall success callback and ensure that only the request succeeds. As shown in figure:

Error 4: Lost useEffect dependency

UseEffectHook is one of the most commonly used hooks in React, and by default it always runs on every re-render. In some cases, performing cleanup or effect after every render can cause performance problems.

If certain values don’t change between rerenderers, you can tell React to skip the effect call by passing an array as the second optional argument to useEffect:

useEffect(() => { showCount(count) }, [count]); // Update only when count changesCopy the code

React:

If you use this optimization, make sure that the array contains all variables in the external scope that will change over time and be used in effect, otherwise your code will reference the old variables in the previous rendering. See the documentation for more information on how to handle functions and what to do when arrays change frequently.

If you want to execute effect once (only when the component is mounted and unmounted), you can pass an empty array ([]) as the second argument. This tells React that your effect doesn’t depend on any value in props or state, so it never needs to be repeated. This is not a special case — it still follows the way dependent arrays work.

If you pass an empty array ([]), the props and state inside effect will always have their initial values. Although passing [] as the second argument is closer to the more familiar componentDidMount and componentWillUnmount mind-set, there are better ways to avoid repeating calls to Effect too often. In addition, remember that React waits for the browser to finish rendering the screen before delaying the useEffect call, thus making extra operations convenient.

We recommend enabling the Strict-deps rule in eslint-plugin-react-hooks. This rule warns when you add false dependencies and suggests how to fix them.

Consider the following example:

As you can see, the button was clicked four times, but the showCount method only outputs the result once.

Instead, add the count dependency.

useEffect(() => { showCount(count) }, [count]); // Update only when count changesCopy the code

Error 5: Using an expired State

Let’s start with an example: calling the update state method multiple times.

Multiple changes to useState are merged into one, because state is only created when the component is first rendered. On the next re-render, useState returns us the current state.

What if it’s like three changes? The answer is the way the useState argument uses the function

The final summary

There are some mistakes you tend to make when using React Hooks with advanced and custom functionality. In this article, I discussed five common mistakes to avoid when using React Hooks.

If you have any suggestions or mistakes on this article, please share them in the comments section.

Thanks for reading!!