memo-effect-analyzerstable

Classify the effectiveness of React.memo optimizations by analyzing prop change history — distinguish genuine data changes from reference instability and get a session verdict. Dev-only, zero production cost.

Install: pnpm add @sapanmozammel/memo-effect-analyzer

⚠ memo ineffective

onAction, config, and tags are all passed inline — new references on every parent render. Every signal is reference-only. Under current prop stability, React.memo would not skip these re-renders.

<UserCard>render #1

onAction[Function]

config{theme:"dark"}

tags[admin]

label"UserCard"

useMemoEffectAnalyzer output

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

▸See the code

❌ The pattern:

// ❌ New references on every parent render
const Parent = () => (
  <UserCard
    onAction={() => handleAction(id)}
    config={{ theme: 'dark' }}
    tags={['admin']}
  />
);

✅ The fix:

// ✅ Stable references — memo now positioned to skip re-renders
const Parent = () => {
  const onAction = useCallback(() => handleAction(id), [id]);
  const config = useMemo(() => ({ theme: 'dark' }), []);
  const tags = useMemo(() => ['admin'], []);
  return <UserCard onAction={onAction} config={config} tags={tags} />;
};

▸How to add this to your component

import { useMemoEffectAnalyzer } from '@sapanmozammel/memo-effect-analyzer';

const UserCard = React.memo((props: UserCardProps) => {
  useMemoEffectAnalyzer('UserCard', props as Record<string, unknown>);
  // rest of your component...
});

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