Avoid these five common mistakes when writing react with hooks

React as a framework

React has been out in the world of web development for quite some time now. Its position as a tool for agile web development has steadily strengthened in recent years. Especially after the announcement and release of the new hook api/concept , writing components has never been easier.

Although the team behind react and the huge community have tried to train and explain the concepts of the framework in an impressive way, I still see some pitfalls and common mistakes that were made while working with it. I kept a list of all the mistakes I saw over the last years related to react especially with using hooks. In this article I want to show you the most common ones. I will also try to explain in detail, why I think they are mistakes and a suggestion for doing it in a cleaner way.

Disclaimer

Before we start with the list, I have to say that most of the following things are not fundamental mistakes or don't look wrong at first glance. Most of them are unlikely to affect the performance or apperance of the application. Probably nobody would notice, except for the developers working on the product, that something is wrong here, but I still believe that good quality code can lead to a better developer experience and thus to a better product.

As with any software framework or library, there are millions of different opinions about it. Everything you see here is based on my personal opinion and should not be considered a general rule. If you have a different opinion about her, I would love to hear it :star2:

1. Using useState when no rerender is needed

One of the core concepts of react is dealing with state. You can control your entire data flow and rendering through state. Each time the tree is rendered again, it is most likely tied to a change in state.

With the useState hook you can now also define your state in function components. Which is a really neat and easy way how to handle states in react. But it can also be misused as we see in the following example.

For the next example we need a bit of explanation, suppose we have two buttons, one button is a counter and the other button sends a request or triggers an action with the current count. However, the current number is never displayed within the component. It is only required for the request when you click the second button.

This is dangerous :x:

function ClickButton(props) {
  const [count, setCount] = useState(0);

  const onClickCount = () => {
    setCount((c) => c + 1);
  };

  const onClickRequest = () => {
    apiCall(count);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

The problem :zap:

At first sight, you might ask what exactly is the problem with that? Isn't that what state was made for? Sure you are right, this will work just fine and probably there will never be a problem with that. However in react every state change will force a rerender for that component and most likely its children. But in the above example since we never use that state in our render part, this will end up being an unnecessary render every time we set the counter, which can impact the performance or could have unexpected side effects.

The solution :white_check_mark:

If you want to use a variable inside your component which should keep its value between rendering but also don't force a rerender, you can use the useRef hook. It will keep the value, but doesn't force the component to rerender.

function ClickButton(props) {
  const count = useRef(0);

  const onClickCount = () => {
    count.current++;
  };

  const onClickRequest = () => {
    apiCall(count.current);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}