useRenderCount
Counts how many times the current hook instance has rendered.
About
useRenderCount is a debugging probe that increments a ref during render and returns the new count. The first render returns 1.
Examples
import { useState } from "react";
import { useRenderCount } from "rooks";
export default function RenderCounter() {
const [count, setCount] = useState(0);
const renders = useRenderCount();
return (
<section>
<p>Render attempts: {renders}</p>
<button type="button" onClick={() => setCount((value) => value + 1)}>
State: {count}
</button>
</section>
);
}Parameters
This hook accepts no parameters.
Return value
A number starting at 1 and incrementing for each render of that mounted hook instance.
Behavior and lifecycle
The counter mutates a ref during render and creates no effect or cleanup. It resets after a real unmount and remount. Concurrent React can start and abandon renders, and Strict Mode can render extra times in development, so the number represents render attempts observed by this hook rather than a guaranteed count of committed paints.
Compatibility and accessibility
No browser API is required, and server rendering returns 1 for that server hook instance. Use the count for diagnostics, not product logic. If displayed in development UI, avoid announcing every render through a live region.