Welldone Software
Published in

Welldone Software

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.

--

--

--

The leading full-stack software solutions company. Creating amazing frontends and rock-solid backends using top-notch technologies and practices. Visit us at https://welldone.software/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vitali Zaidman

Vitali Zaidman

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

More from Medium

About my newly learned technology (Redux toolkit)

Why you and your company probably shouldn’t use Vue: The Hard Way

A Quick & Comprehensive Guide to the useEffect Hook in React

Draft: Structuring Components folders for better Maintainability and Sanity