hooks: useRenderCount

Debug better with this utility hook

Debugging is essential to software development, but it can often be frustrating and time-consuming. Fortunately, there are tools and techniques that can make the process easier and more efficient.

Table of Contents

useRenderCount

Using this simple utility hook, you can quickly identify which components are rendering too frequently, and optimize your code to improve performance.

import { useEffect, useRef } from "react";


export default function useRenderCount() {
  const countRef = useRef < number > 1;
  useEffect(() => countRef.current++);
  return countRef.current;
}

Example of usage

import useRenderCount from "./useRenderCount"


export default function ExampleComponent{
  const [show, setShow] = useState(false);


  const renderCount = useRenderCount();


  return (
    <>
      <div>{renderCount}</div>
      <button onClick={() => setShow(!show)}>Toggle</button>
    </>
  )
}

Related snippets