why-did-you-render
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
A React development tool that logs to your browser console whenever a component re-renders unnecessarily, showing exactly what changed so you can quickly find and fix performance issues in your app.
This is a developer debugging tool for React, the popular JavaScript library used to build web and mobile interfaces. The library's name, why-did-you-render, describes exactly what it does: it watches your React components and tells you in the browser console when one of them re-drew itself for a reason that could have been avoided.
In React, components can redraw unnecessarily when they receive a new object or function that looks the same as before but is technically a different value in memory. These redundant redraws waste processing time, especially in large applications. The tool detects these cases and logs a message explaining what changed and which component was affected, so a developer can find and fix the root cause.
Setup involves installing the package as a development dependency and adding a small configuration file that activates the tool only when the app is running in development mode. The README is explicit that the tool must never run in a production build: it slows React down noticeably and patches React internals in ways that could cause unexpected behavior in a live app. It works with both standard React web apps and React Native mobile apps.
You can track all qualifying components at once or opt individual components in by setting a flag on them. The tool also supports tracking custom hooks, so if you use a state-management hook from a library like React Redux, it can watch that hook as well and report when it causes an avoidable update.
The project is tested against React 19. Earlier React versions have separate versioned branches with their own setup instructions, linked from the README.
Where it fits
- Find React components that re-render on every state change even when their actual data hasn't changed.
- Debug why a specific component is slow by seeing the exact prop or state value that triggered the redraw.
- Track unnecessary re-renders caused by custom hooks like React Redux in your component tree.
- Catch performance issues in React Native mobile app components before they reach production.