React Scan vs why-did-you-render
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
Finds React components that re-render too often, highlighting them in your running app.
Open source · MIT
A development-only tool that logs React re-renders that may be avoidable, so you can find slow spots.
The short answer
Choose React Scan if you need…
- Developers debugging slow React pages in development
- Teams looking for unnecessary re-renders without reading every component
- Developers who want a visual overlay rather than manual profiling
- Developers using Next.js, Vite, or Remix, which the README gives setup examples for
Choose why-did-you-render if you need…
- React developers investigating slow screens with many memoized or pure components
- Teams debugging why a large memo component keeps re-rendering after a prop like an inline style object changes
- Developers who want to track custom hooks such as useSelector from React Redux
- React Native developers using Metro or Expo with a Babel setup
Side-by-side
| React Scan | why-did-you-render | |
|---|---|---|
| Type | Dev tool | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 21.9k | 12.5k |
| Setup difficulty | Beginner | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | JavaScript |
| Last code update | 3 months ago | 7 months ago |
What each one is
React Scan
React Scan is a developer tool that watches your React app while it runs and highlights components that re-render unnecessarily, which can make an app slow. It is added with a script tag or an npm install and needs no changes to your code. The README also notes that the project now recommends React Doctor, a related tool aimed at coding agents.
why-did-you-render
Why Did You Render is a library that hooks into React and prints notices when a component re-renders even though its props or state did not meaningfully change. It is aimed at developers hunting for performance problems in React and React Native apps. The README says it should only be used in development, since it noticeably slows React down.
Best for
React Scan
- Developers debugging slow React pages in development
- Teams looking for unnecessary re-renders without reading every component
- Developers who want a visual overlay rather than manual profiling
- Developers using Next.js, Vite, or Remix, which the README gives setup examples for
why-did-you-render
- React developers investigating slow screens with many memoized or pure components
- Teams debugging why a large memo component keeps re-rendering after a prop like an inline style object changes
- Developers who want to track custom hooks such as useSelector from React Redux
- React Native developers using Metro or Expo with a Babel setup
Strengths
React Scan
- Requires no code changes beyond adding the script or package
- Highlights specific components on screen instead of requiring manual profiling
- Available as an npm package with a guided init command and a browser extension
why-did-you-render
- Targets a specific problem: showing when a re-render may be avoidable, with reasons
- Works with React Native as well as React web apps, according to the README
- Simple opt-in: enable tracking for all pure components or mark individual components
Not ideal for
React Scan
- Production monitoring: the README says forcing it to run in production is 'not recommended', so it is meant for development use
- People who want an automatic code fixer: the description says 'scan and fix', but the README only describes detecting and highlighting issues
- Non-React projects, since it targets React specifically
why-did-you-render
- Production builds, because the README warns it significantly slows React and monkey patches it, which can cause unexpected behavior
- Projects using React Compiler, which the README says was not tested with the library and is believed to be incompatible
- Projects on React 18 or older without using the matching older version branch (v8 for React 18, v7 for React 16/17)
- Users who want Mobx support, which the README says is currently not supported
Trade-offs
React Scan
- The README recommends React Doctor for new work, so the project's future direction is less clear
- Detection shows where renders happen but the README does not describe automatic fixes
- Relies on loading the script from unpkg in the manual setup examples
why-did-you-render
- Only tested with React 19 in the current version; older React versions need older releases
- Must be kept out of production builds and monkey patches React, so setup needs care
- The README notes that not every re-render is a problem, and chasing them can add complexity without benefit
Getting started
React Scan
Automatic setup (detects framework and installs)
npx -y react-scan@latest initManual install via npm
npm install -D react-scanwhy-did-you-render
Install as a dev dependency with npm
npm install @welldone-software/why-did-you-render --save-devInstall as a dev dependency with yarn
yarn add @welldone-software/why-did-you-render -DFrequently asked questions
What is the difference between React Scan and why-did-you-render?
React Scan: Finds React components that re-render too often, highlighting them in your running app. why-did-you-render: A development-only tool that logs React re-renders that may be avoidable, so you can find slow spots. React Scan suits developers debugging slow react pages in development, while why-did-you-render suits react developers investigating slow screens with many memoized or pure components.
Are React Scan and why-did-you-render free?
React Scan: Free and open source. why-did-you-render: Free and open source.
Which is easier to set up, React Scan or why-did-you-render?
React Scan is easier to get started with (rated beginner); why-did-you-render is rated intermediate and usually needs more setup.
Is React Scan or why-did-you-render more popular?
React Scan has more GitHub stars (21.9k) than why-did-you-render (12.5k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to React Scan and why-did-you-render?
Other options people compare them with include TSDX, Gifted Chat, TanStack Query, react-virtualized, Million.js.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.