unstable-props-detectorstable

Detect props whose reference identity changes between renders — functions, objects, and arrays that silently defeat React.memo optimizations. Dev-only, zero production cost.

Install: pnpm add @sapanmozammel/unstable-props-detector

⚠ unstable references

Parent passes onSelect, config, and tags as inline literals. Every render creates new references — React.memo is defeated for all three props.

<SettingsPanel>render #1

onSelect[Function]

config{theme:"dark"}

tags[admin]

useUnstablePropsDetector output

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

▸See the code

❌ The bug:

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

✅ The fix:

// ✅ Stable references — memo can now do its job
const Parent = () => {
  const onSelect = useCallback(() => setSelected(id), [id]);
  const config = useMemo(() => ({ theme: 'dark' }), []);
  const tags = useMemo(() => ['admin'], []);
  return <SettingsPanel onSelect={onSelect} config={config} tags={tags} />;
};

▸How to add this to your component

import { useUnstablePropsDetector } from '@sapanmozammel/unstable-props-detector';

const SettingsPanel = (props: SettingsPanelProps) => {
  useUnstablePropsDetector('SettingsPanel', props as Record<string, unknown>);
  // rest of your component...
};

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