welldone-software/why-did-you-render — reverse-engineered prompt

Build me a developer tool for React that helps people spot components that render again when they probably didn’t need to. It should plug into a React app only during development, patch React in a safe and obvious way, and print clear console messages showing which component updated and what props, state, hook result, or owner change caused it.

I want it to work with modern React using the automatic JSX setup, and also be usable in React Native. Make it easy to turn on for all memo or pure components, or for one specific component by setting a flag on it. Also support tracking selected custom hooks, like a selector hook from a state library.

Please include a small demo app, tests, TypeScript types, and clear setup docs that warn people not to use it in production because it can slow React down. If you need current React 19 details, look them up online.