Track how many times a component rendered using useRef() - React

First let's think of all the ways how a beginner try to tackle this.

To follow along if you want to, create a new react project and put this much code in your App.jsx or any component of your choice and also remove everything from index.css and App.css:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

It'll preview like this right now:

In the above code, I've create a state variable named count which increments by 1 on clicking the button. The count here is an extra state variable which doesn't doing anything here but it will help you understand things better. This code shouldn't overwhelm you if you've previously coded in React.

So, let's get to the main part...

1. Using State Variable

This is the first approach which come to most of us minds like create a state variable initializing it with 0 and increment it by 1 every time component renders.

Your App component will look like this:

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

This approach will work fine here but it has many flaws. The component ideally isn't rendering only once when we click Force Render button. When we click the button the count value increments by 1 which causes the component to re-render as we all know change in any state variable causes a component to re-render. But it does end here after a re-render by setCount(count + 1), setNumberOfTimesRendered(numberOfTimesRendered + 1) will be triggered and causes the component to render again.

The numberOfTimesRendered value increments by 1 but every time we click the Force Render button the component is rendering twice which shows why using the state variable for this kind of matter is not the best but worst approach here.

2. Using Global Variable

Another approach one can think of is defining a global variable outside the component life-cycle and increment it by 1 when component re-renders, like this:

let numberOfTimesRendered = 0;

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

This approach will work fine and it doesn't cause any extra renders and this seems to be the best solution for this but it isn't as you shouldn't define anything outside the component life-cycle.

3. Using Local Variable

One can also think of the same approach as above but with local variable inside the component but let me tell you, there isn't any worst approach than this because every time the component render the local variable will re-initialize to 0 and we'll lost track of the previous renders every time.

4. Using useRef() hook

Now let's implement this using useRef().

As most of us know useRef is a hook to reference elements inside the dom and manipulate them manually but useRef is not just limited to this. It can also hold values and it can be used to keep a variable persistent across component rendering life-cycle.

If you store a value inside the useRef, it will not be affected by the React component rendering life-cycle, the value will remain persistent across any amount of re-renders. The implementation will look like this:

import { useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const numberOfTimesRendered = useRef(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered.current += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered.current} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

numberOfTimesRendered.current gives the current value stored inside the reference variable. This approach doesn't cause any extra re-renders not saying it is the best but one of the most optimal approach as of my knowledge.

That concludes this article. Open for feedbacks and if you need further clarification, please comment below, and I'll do my best to assist you.

Connect with me on X & LinkedIn!🔔✨