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 should 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:
If the component is tracked by whyDidYouRender, and you set it’s state to be the same by value but not by reference, you’ll receive the following notification in the console:
To fix this, do not call setHookState
if the state you pass to it is deeply equal to the previous state.
For example in our case the following code could help:
You can also create a custom hook to achieve this:
The useReducer Hook
The same principle as discussed in the useState hook, applies to the useReducer hook.
Make sure the state returned from the reducer is not a different object that equals by value but different by reference from the previous state:
Here is an example:
Other React hooks
The same principle applies to all the other hooks.
Custom Hooks
Would be tracked by tracking the custom hooks.