why-renderstable

Debug why React components re-render by diffing props between renders. Logs primitive changes, object reference churn, and added/removed props.

Install: pnpm add @sapanmozammel/why-render

⚠ unnecessary re-render

Parent passes user={{ id: 1, role: "admin" }} as a literal. React creates a new object reference every render — same data, new identity.

Show fix

<UserCard>render #1

name"Alice"

age25

user{id:1, role:"admin"}

onSave[Function: anonymous]

useWhyRender output

Trigger an action above.No output = hook stayed silent.

▸See the code

❌ The bug:

// ❌ New object created on every parent render
const Parent = () => (
  <UserCard
    user={{ id: 1, role: 'admin' }}
    onSave={stableCallback}
  />
);

✅ The fix:

// ✅ Stable reference — same object across renders
const Parent = () => {
  const user = useMemo(
    () => ({ id: 1, role: 'admin' }),
    [],
  );
  return <UserCard user={user} onSave={stableCallback} />;
};

▸How to add this to your component

import { useWhyRender } from '@sapanmozammel/why-render';

const UserCard = (props: UserCardProps) => {
  useWhyRender('UserCard', props);
  // rest of your component...
};

No-op in production. Open DevTools console to see output alongside this panel.