hooks: useRenderCount

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
• Example of usage

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>
    </>
  )
}