Track Redundant React Hooks Re-Renders With “Why Did You Render” Version 3

@welldone-software/why-did-you-render version 3 is released with many features, including tracking of React hooks issues.

Sometimes you know a certain React component is costly to re-render and sould not be re-rendered unless there’s a good reason for it to re-render.

But how can you enforce it?

If a re-render is caused by state , props , this.forceUpdate() , or by the component’s father render, the library will notify you. You can read about it in the first article.

In this part we would discuss how a React hook can cause a component to be re-rendered and how to detect if this re-render can be prevented using the @welldone-software/why-did-you-render library.

The main thing to know about hooks is that if you set any hook’s state to be the same as it’s previous state, it would not cause a re-render. If the state is different, even if it deep equals to the previous one, it would cause a re-render.

The useState Hook

In the following sandbox, we show how setState hooks may cause a redundant re-render: