useRenderCount

cURL wget

A hook that returns the amount of times a component renders/re-renders

Example

Demo Code

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

export default function UseRenderCountExample() {
  const renderCount = useRenderCount();
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  return (
    <div className="flex flex-col items-center space-y-4">
      <button
        onClick={() => {
          setCountOne(countOne + 1);
        }}
        className="w-full rounded bg-ctp-sky px-4 py-2 text-ctp-base"
      >
        Counter One: {countOne}
      </button>
      <button
        onClick={() => {
          setCountTwo(countTwo + 1);
        }}
        className="w-full rounded bg-ctp-green px-4 py-2 text-ctp-base"
      >
        Counter Two: {countTwo}
      </button>
      <button
        onClick={() => {
          setCountOne(0);
          setCountTwo(0);
        }}
        className="w-min rounded bg-ctp-red px-4 py-2 text-black"
      >
        Reset
      </button>
      <p>Render count: {renderCount}</p>
    </div>
  );
}

Code

import { useRef } from "react";

/**
 * A hook that returns the amount of times a component renders/re-renders
 * @returns {number} the amount of times a component has rendered / re-rendered
 */
export default function useRenderCount(): number {
  const count = useRef(0);

  count.current++;

  return count.current;
}