useRenderCount

When you're chasing a performance bug, the first question is usually "how often is this component actually re-rendering?" useRenderCount answers it: a tiny debugging hook that returns how many times the component has rendered so far — 1 on mount, 2 after the next render, and so on. Drop it in, log the number, and watch whether a memo or a bad dependency is causing render storms.

Implement useRenderCount(). It takes no arguments and returns the running render count including the current render. Critically, counting must not itself cause a re-render — so no state.

Signature

function useRenderCount() {
  // returns the number of times this component has rendered (>= 1)
}

Examples

function Row({ item }) {
  const renders = useRenderCount();
  console.log(`Row ${item.id} rendered ${renders} times`);
}
// render 1 -> 1, render 2 -> 2, render 3 -> 3

const renders = useRenderCount(); // 1 on mount, grows by 1 each render

Notes

• Persist across renders — the tally has to survive between renders, so keep it in a ref.
• Increment during render — bump the ref in the render body and return its value, so the count reflects the current render.
• No state — using useState to hold the count would schedule another render and inflate the number. A ref mutates silently.
• Starts at 1 — the first render returns 1 (it counts itself), not 0.