Why Did You Render v4 Released!

TypeScript support, Custom hooks tracking (like React-Redux’s useSelector), Tracking of all pure components.

So what’s new in @welldone-software/why-did-you-render v4?

TypeScript Support

Typing for all the different scenarios of the library are now supported.

Improved Overall Stability

Tests are now covering more scenarios than ever, including integration with libraries, and there are no significant open issues.

Tracking of all Pure Components

The trackAllPureComponents option makes the library track all pure components.

Using this option is very convenient because now you don’t need to explicitly set whyDidYouRender = true on components (although you still can). Instead, you can assume all pure components needs to tracked, and to be as efficient as possible without redundant re-renders.

Notice: you can turn off whyDidYouRender anytime for specific components by using whyDidYouRender = false on them.

Tracking of Custom Hooks

trackExtraHooks allows you to track hooks that are not the native React hooks (like useState). In the new version, hooks like useSelector of the React-Redux library can be tracked to ensure they don’t cause a re-render when it can be avoided.

Example

Check it out for yourself in the following sandbox.

In the following example, BrokenBigPureComponent (Imagine that it includes many calculations and returns a huge React element) is re-rendered on every single state change.

That’s right! This component is re-rendered on every call to dispatch.
Can you understand why?

A problematic component that renders on every state change

By adding the latest why-did-you-render with trackAllPureComponents and trackExtraHooks we would ensure a warning is omitted to the for each such redundant render.

Using why did you render with tracking of all pure components and tracking of the useSelector hook

Because:

• All pure components are tracked now, including BrokenBigPureComponent.
• The React-Redux’s useSelector is tracked.

This example shows @welldone-software/why-did-you-render is stronger and more useful than ever!

Check it out for yourself in the following sandbox.