What do you like in Why Did You Render? What tooling would you like to be integrated in React Developer Tools?

[vzaidman]

Hi everyone,
I’m Vitali, the maintainer of Why Did You Render, and I’m excited to share some news and gather your thoughts.

Over the past year, I joined the React team, specifically the team that works on React tooling. This opportunity has opened the door to explore how we can enhance the developer experience for React users— and your input could offer valuable insights to help me with this effort.

I’d love to hear from the community about several topics:

1. What do you love about Why Did You Render?
   • How do you use it in your projects?
   • What problems has it solved for you?
2. What features would you like to see integrated into React Developer Tools?
   • This could include existing features from "Why Did You Render" or new ideas entirely.
3. Are there other pain points or debugging needs you’d love to see addressed?

Your feedback is invaluable in shaping the future of Why Did You Render and potentially to React Developer Tools.

Looking forward to hearing your insights and ideas!

Cheers,
Vitali

[mark-veryawesome]

Hi Vitali,

Congrats!

It would be great to see tooling oriented around providing better digram visualizations for component state tracking and tress as well as for time-travel debugging.

[KrunalParmar85]

Would it be possible for WDYR (Why Did You Render) to be integrated into React DevTools or offered as a browser extension? Currently, setting it up depends on whether the project uses Vite, CRA, or TypeScript, making the setup process vary. Having it as a built-in feature of React DevTools or as a standalone browser extension would provide a more seamless and consistent experience for developers.

[mark-veryawesome]

you should look into https://github.com/aidenybai/react-scan/tree/main. Much more streamlined implementation compared to WDYR and way better UX overall

[joeyfigaro]

Thanks @mark-veryawesome – going to give it a shot. I haven't been able to get WDYR to work for web projects in years.

[vzaidman]

WDYR to be integrated into React DevTools

I'm on the React Developer Experience team. What features would you like to have in particular? We are looking into extending React DevTools with some of WDYR features.

[natew]

Just want to say, I cannot wait for react dev tools to have some proper why did you render support. It's desperately needed and will save countless hours of dev time. Appreciate all the work you've done!

[iamakulov]

Hey :) I’ve used WDYR a ton over the years when consulting for clients (and taught it in workshops). It’s been great!

My usual workflow has been to 1) grab a slow app, 2) start profiling it with Chrome DevTools / React Profiler, 3) add WDYR into the mix when I needed more info that what DevTools/Profiler provide. Normally, I’d avoid enabling it for all components (since that’s too much noice) and just flip it for specific components (with Component.whyDidYouRender = ...). I’d also set logOnDifferentValues: true as I would typically look at all rerenders (not only ones where data hasn’t changed). That’s because some rerenders would technically have differing data but practically would still be unnecessary (e.g. when there’s some randomly changing ID in the data).

Here’s where WDYR has been great and filled its niche:

• Showing what changed in context/state/hooks. It’s really needed for debugging perf issues, and React DevTools plainly don’t do that. An alternative is to use useWhyDidYouUpdate, but it’s a bit more annoying to add since you need to copy-paste it (and doesn’t tell you if the values are deep-equal)
• Supporting custom hooks. Being able to wrap Redux’s useSelector was insanely convenient (even though it got harder with recent Redux versions).

Thank you for all your work!

[amirsarfarW]

Is it available to add a feature that enable us to include a component and all its descendent (children) components?

For example I have this code

<Parent>
  <A>
    <B>
      <C>Hello</C>
    </B>
  </A>
</Parent>

I want to be able to include A and all its children (in this case A, B & C)

In large pages it is very difficult to include a section and its children with regex and it is almost impossible to track all components

[vzaidman]

Is it available to add a feature that enable us to include a component and all its descendent (children) components?

No. And I can't think of a neat way of doing that since WDYR is currently per React Component (basically added where you define your component, and not per React Element (which is when a component is used).