useRenderCount

The useRenderCount hook is a utility for debugging and performance optimization. It tracks how many times a component has rendered.

Demo

Render Count1

Button Click Count (State): 0

Source Code

Copy this code into src/hooks/useRenderCount.ts:

import { useRef } from 'react';

export const useRenderCount = () => {
  const renderCount = useRef(0);
  renderCount.current += 1;
  return renderCount.current;
};

Usage

import { useRenderCount } from '@/hooks/useRenderCount';
import { useState } from 'react';

const MyComponent = () => {
  const renderCount = useRenderCount();
  const [state, setState] = useState(false);

  return (
    <div>
      <p>This component has rendered {renderCount} times.</p>
      <button onClick={() => setState(!state)}>Toggle State to Re-render</button>
    </div>
  );
};

API Reference

Return Value

Type	Description
`number`	The total number of times the component has rendered (including the initial render).