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?
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.
Because:
- All pure components are tracked now, including
BrokenBigPureComponent. - The
React-Redux’suseSelectoris tracked.
This example shows @welldone-software/why-did-you-render is stronger and more useful than ever!
