React count the number of renders for an individual component

If a React component is re-reneded in excess it can lead to performance issues. Let's see how to count the number of renders for individual React components using the useRef() hook. We'll also see how to extract this functionality into a custom hook for easier reuse.

In order to track and count each time an individual React component is rendered we can use the useRef() hook.

const App = () => {
  const rendersNo  = useRef(0)
  const [counter, setCounter] = useState(0)

  rendersNo.current = rendersNo.current + 1
  const increase = ()=> {setCounter(c => c + 1)}

  return(<div>
      <button onClick={increase}>
          Increase counter & trigger rerender
      </button>
      <p>Counter: {counter}</p>
      <p>Rerenders: {rendersNo.current}</p>
  </div>)
}

And if we want to extract this in a separate hook we can do:

const useRenderCount = () => {
  const rendersNo = useRef(0);
  useEffect(() => {
    rendersNo.current++;
  });
  console.log("Rerenders: " + rendersNo.current)
};

// and in the App component
const App = () => {
  useRenderCount()
  //... 
}

You can see the full codepen example here.

---