DEV Community: Amul Gaurav

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

Amul Gaurav — Fri, 18 Oct 2024 11:51:27 +0000

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!🔔✨

Stack vs Heap memory

Amul Gaurav — Sat, 27 Jul 2024 17:34:35 +0000

This concept isn't different to any other programming language, so any literature about heap and stack applies the same to your preferred programming language. So, you might not want to skip it thinking this probably doesn't apply to the language in which I code. Let's dive right in!

Stack Memory

Location: Stack memory resides in RAM.
Purpose: It is used for static memory allocation, which includes storing function parameters, return addresses, local variables, and control flow data.
Structure: The stack operates in a Last In, First Out (LIFO) manner.
Size: The size of the stack is generally determined at the start of a program and is limited. The exact size can vary depending on the operating system and the architecture, but it is typically much smaller than the heap. Practically, stack size might be a few megabytes.
Management: Stack memory is managed automatically by the CPU, with memory being allocated and deallocated as functions are called and return.

Heap Memory

Location: Heap memory also resides in RAM.
Purpose: It is used for dynamic memory allocation, where memory blocks are allocated and freed as needed by the program.
Structure: The heap does not follow a strict order and can grow and shrink dynamically.
Size: The heap size is generally much larger than the stack size. It can be many gigabytes, depending on the system's available memory and configuration.
Management: Heap memory is managed manually by the programmer using allocation (malloc, new) and deallocation (free, delete) functions. Some modern languages (like Java & Python) have garbage collectors to manage heap memory automatically.

Now let's discuss when you write code how your variables get stored.

1. 1st Scenario:

If you want your variable to be available in the function scope & gets cleared from the memory as soon as the function returns, you will declare it like you normally do & the variable will get stored in Stack memory. A stack frame is added when a function is called and removed when the function returns. Here's an example how you can do that in JAVA:

static void sample() {
    int a = 5;
}

In the above code block, the variable a is defined in the sample function scope & will only be available in that scope when the sample function gets called. It will be cleared from the stack as soon as the sample function call returns.

2. 2nd Scenario:

If you don't want the behavior like in Scenario 1. There are 2 options to avoid that:

Using Stack: as soon as the function call finishes and function gets cleared from the stack, the variable stored gets cleared from its current function call stack & gets copied to its parent function call stack.
Using Heap: The most preferred & efficient way to achieve this is to create a pointer. A pointer is a reference variable which is stored in stack memory points to a block of heap memory. Such an allocation is independent of function calls. This means the heap can become fragmented and the OS needs to keep track of which memory is used and which is free. This is quite a lot of work compared to the stack where only one pointer is used to point to the currently active frame. The data stored in heap memory can be pointed or referenced by more than one reference variable.

Student student = new Student();

// student -> object of class Student

// student -> reference variable

// new Student() -> new keyword dynamically allocates memory for student object of class Student() in heap memory

When there is no or zero reference variable pointing to the memory allocated in heap, it's get garbage collected by the Garbage Collector, in case of languages that have garbage collector like JAVA.

In languages like C or C++ where there is no concept of Garbage Collectors, the memory allocated in heap must be handled manually by the programmer using (malloc, new) functions for allocation and (free, delete) functions for deallocation.

Stack is simple, fast and limited. Heap is flexible and almost unlimited but slow to allocate and a lot of work for the OS to manage.

Bonus: When primitives are declared as instance variables within a class, they are part of the object's memory and are allocated on the heap.

References

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

Connect with me on X & LinkedIn!🔔✨