React hook to count and log component’s re-renders

I find this hook useful during development, to know how many times component is rendered (counter resets on dismount).

Hook’s code:

import { useRef } from "react";

const useRenderCounter = label => {
  const counter = useRef(0);
  counter.current++;
  console.log(`${label} rendered ${counter.current} times`);
};

export default useRenderCounter;

Use hook inside component you are developing:

useRenderCounter("ComponentName");

Remove after component is finished (you don’t want to flood console with messages, especially in production)

Featured image source – pxhere.com