render-insightsstable

Unified render diagnostics — correlates prop changes, frequency, unstable references, and memo effectiveness into a single scored report with actionable recommendations. Dev-only, zero production cost.

Install: pnpm add @sapanmozammel/render-insights

✓ healthy

All reference props are memoized; only primitive data changes trigger re-renders. Every signal is genuine, session is EFFECTIVE, and the Render Health Score approaches 100.

<Dashboard>render #1

onClick[Function]

config{theme:"dark"}

tags[admin, power-user]

title"0"

useRenderInsights output

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

▸See the code

// ✅ Stable refs + genuine primitive data change
const Parent = () => {
  const [counter, setCounter] = useState(0);
  const onClick = useCallback(() => {}, []);
  const config = useMemo(() => ({ theme: 'dark' }), []);
  return (
    <Dashboard
      onClick={onClick}
      config={config}
      title={String(counter)}
    />
  );
};

▸How to add this to your component

import { useRenderInsights } from '@sapanmozammel/render-insights';

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

No-op in production. Open DevTools console to see the grouped report alongside this panel. Correlates prop changes, frequency, memo effectiveness, score, and recommendations in a single report.