welldone-software/why-did-you-render

★ 12,475JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((why-did-you-render))
    What it does
      Detect re-renders
      Log what changed
      Track custom hooks
    Setup
      Dev mode only
      Small config file
      React Native support
    Use Cases
      Performance debugging
      Hook tracking
      Component optimization
    Audience
      React developers
      Frontend engineers

mindmap root((why-did-you-render)) What it does Detect re-renders Log what changed Track custom hooks Setup Dev mode only Small config file React Native support Use Cases Performance debugging Hook tracking Component optimization Audience React developers Frontend engineers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Find React components that re-render on every state change even when their actual data hasn't changed.

USE CASE 2

Debug why a specific component is slow by seeing the exact prop or state value that triggered the redraw.

USE CASE 3

Track unnecessary re-renders caused by custom hooks like React Redux in your component tree.

USE CASE 4

Catch performance issues in React Native mobile app components before they reach production.

Tech stack

JavaScriptReactReact Native

Getting it running

Difficulty · easy Time to first run · 5min

Must only run in development mode, never include in a production build as it patches React internals and slows the app.

In plain English

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.

Copy-paste prompts

Prompt 1

My React app feels sluggish. Help me set up why-did-you-render to monitor all components and log unnecessary re-renders to the console during development.

Prompt 2

A specific component in my app re-renders too often. Show me how to enable why-did-you-render tracking on just that one component using the whyDidYouRender flag.

Prompt 3

I'm using a custom Redux hook and suspect it's causing extra re-renders. How do I configure why-did-you-render to track that specific hook?

Prompt 4

Show me a typical why-did-you-render console log message and explain what each part means so I know exactly how to fix the issue it reports.

Open on GitHub → Explain another repo

← welldone-software on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.