Why Did You Render v4 Released!

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

Vitali Zaidman
Jan 27 · 2 min read

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

TypeScript Support

Improved Overall Stability

Tracking of 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

Example

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.

Welldone Software

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

Thanks to Dani Kenan

Vitali Zaidman

Written by

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

Welldone Software

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

More From Medium

More from Welldone Software

More from Welldone Software

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade