why-render-frequencystable

Track how often React components re-render. Logs total count, rolling-window rate, and observation (Low / Moderate / High). Dev-only, zero production cost.

Install: pnpm add @sapanmozammel/why-render-frequency

⚠ excessive renders

Every keystroke updates parent state, causing the child component to re-render on each character. Watch the frequency accumulate in the console.

<SearchResults>render #1

text""

▸How to add this to your component

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

const UserCard = (props: UserCardProps) => {
  useRenderFrequency('UserCard');
  return <div>{props.user.name}</div>;
};

No-op in production. Open DevTools console to see grouped output — one entry every 10 renders by default. Set { sampleEvery: 1 } to log on every render.