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?
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
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.
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
trackExtraHooks we would ensure a warning is omitted to the for each such redundant render.
- All pure components are tracked now, including
This example shows @welldone-software/why-did-you-render is stronger and more useful than ever!