what is why-did-you-render fr?

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.