Why-Did-You-Render: Find Unnecessary React Re-renders

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.