Why-Did-You-Render: Find Unnecessary React Re-renders
The why-did-you-render library is a detective for your React app, finding components that re-render unnecessarily. Use it in development to debug performance by spotting when new object or function references break memoization.
Why it exists
React's performance can suffer from unnecessary component re-renders. It's often difficult to see why a memoized component is re-rendering, as its props might look identical but are actually different object references in memory. This library makes these hidden causes visible during development.
The mental model
Think of why-did-you-render as a noisy neighbor for your components. It shouts at you from the developer console whenever a component re-renders for a reason you might not expect, like receiving a new function or object that is identical in value but different in memory reference.
How it works
The library "monkey-patches" React's rendering lifecycle. When a component is about to update, it intercepts the process to compare the old and new props and state. If it determines a re-render was caused by an unstable reference—like an inline style object or an arrow function defined in the render method—it logs a detailed warning to your console explaining exactly what changed.
When to use it
Use this library strictly in development to diagnose performance bottlenecks in complex React or React Native apps. It's most valuable for debugging large, memoized components that re-render more than expected, helping you pinpoint the exact props that are breaking memoization.
When not to use it
Never use this in a production build. The primary mistake is to blindly "fix" every warning it raises. Not all re-renders are harmful, and premature optimization can complicate code for no real performance gain. Always use the React DevTools Profiler to measure the impact of your changes. The library is also likely incompatible with the React Compiler.
One canonical example
A common trigger is passing an inline style object to a memoized component: <MemoizedComponent style={{ width: '100%' }} />. On every parent render, a new { width: '100%' } object is created. Even though the content is the same, the object reference is new, causing the memoized component to re-render. why-did-you-render will flag this, showing the style prop is the culprit.
Interview question
What specific re-render scenario does why-did-you-render primarily help diagnose in React applications?
- a.Components re-rendering when their props or state have identical values but different memory references.Correct
- b.Components re-rendering due to slow or complex logic within their rendering cycle.
- c.Components failing to update visually despite their internal state being modified.
- d.Components re-rendering because their props' underlying values have genuinely changed.
Why? this is the answer
The library's core purpose is to identify when memoized components re-render because their props or state, though seemingly identical, are new object or function references in memory. While slow logic can be a performance issue, why-did-you-render flags the *cause* of the re-render, not the *cost*, which is better measured by a profiler.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles