useRenderCount

Returns the number of renders of a component.

Installation

npx rabbithook@latest add use-render-count

Usage

App.tsx

import useRenderCount from "@/hooks/use-render-count";

function Component() {
  const renderCount = useRenderCount();

  return (
    <p>Component rendered { renderCount } times</p>
  );
}

Code

Typescript

use-render-count.ts

import { useEffect, useRef } from "react";

function useRenderCount(): number {
  const count = useRef<number>(1);

  useEffect(() => {
    count.current++;
  });

  return count.current;
}

export default useRenderCount;

Javascript

use-render-count.js

import { useEffect, useRef } from "react";

function useRenderCount() {
  const count = useRef(1);

  useEffect(() => {
    count.current++;
  });

  return count.current;
}

export default useRenderCount;