Skip to content
Get packs

why-did-you-render

A development-only tool that logs React re-renders that may be avoidable, so you can find slow spots.

GitHub Download v10.0.1
Stars
12.5k
Forks
225
Licence
MIT
Language
JavaScript
Last update
7 months ago
Type
Library

What it is

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.

  • Find which memo component re-renders on every parent update because of a new object or function prop
  • Log the props and state changes that caused a specific component to re-render
  • Track custom hooks like react-redux useSelector to see when they trigger renders
  • Confirm whether an optimization actually reduces re-renders before keeping it

Great for

  • 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

Not ideal for

  • 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
Step-by-step guide: how to use why-did-you-renderInstall, first run, examples, tips and FAQs
why-did-you-render alternativesReact Scan vs why-did-you-renderGifted Chat vs why-did-you-renderTanStack Query vs why-did-you-render

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · npm or yarn · Babel configured with @babel/preset-react (or an equivalent JSX transform setup)

    Install as a dev dependency with npm

    npm install @welldone-software/why-did-you-render --save-dev

    Install as a dev dependency with yarn

    yarn add @welldone-software/why-did-you-render -D
  2. 2

    Run it

    • Install the package as a dev dependency using npm or yarn.
    • Configure Babel's preset-react with runtime 'automatic', development mode, and importSource set to '@welldone-software/why-did-you-render' (development only).
    • Create a wdyr.js file that calls whyDidYouRender(React, { trackAllPureComponents: true }) when NODE_ENV is development.
    • Import wdyr.js as the very first import in your application entry file.
    • Open the app in development mode and check the console for re-render notices.
  3. 3

    Get the most out of it

    • Use trackAllPureComponents to track every React.PureComponent and React.memo, or set whyDidYouRender = true on specific components.
    • Add trackExtraHooks to monitor custom hooks, such as useSelector from React Redux.
    • Pair the logs with the React DevTools Profiler to measure whether a change actually helps, as the README recommends.
    • For TypeScript, name the file wdyr.ts and add the types reference line shown in the README.
    • Focus on heavier components first, since the README cautions that small re-render reductions may not matter.

Downloads

Source code (.zip)master branch · straight from GitHubRelease v10.0.1Release notes and sourceOfficial website & docswww.npmjs.com/package/@welldone-software/why-did-you-render

Strengths

  • 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

Trade-offs

  • 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

How it compares

ProjectStarsTypeLevelUpdatedBest for
why-did-you-render (this)12.5kLibraryintermediate7 months agoReact developers investigating slow screens with many memoized or pure components
react-scan21.9kDev toolbeginner3 months agoDevelopers debugging slow React pages in development
react-native-gifted-chat14.4kLibraryintermediate18 days agoDevelopers building a chat or messaging screen in a React Native app
react-hook-form44.9kLibraryintermediate5 days agoReact developers building forms with several fields
solid36.2kLibraryintermediate4 days agoDevelopers who want fine-grained control over what re-renders in a web UI
swr32.5kLibraryintermediate20 days agoReact developers who fetch data from APIs in components

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.