Do React Hooks use more memory than Class Components?

Question

My understanding is that Javascript classes store their methods on the Class prototype and therefore all Class instances use the same function definition in memory when invoking those methods. i.e. an single function definition in memory is used by every instance.

For React Hooks, a functional component can update state through the function returned by useState(). e.g.

import React, { useState } from 'react'

function MyComponent(){
    const [greeting, setGreeting] = useState("Hello")

    return <h1>{greeting}</h1>
}

If my application was to render 100 MyComponents, would the setGreeting() function in all 100 of the components refer to the same setGreeting() function in memory or would there be 100 copies of the same function in memory?

Bamboo

Answer 1

No, for 100 Components it will be 100 setGreeting would be created.SetGreeting is refrence to the function. So there will be 100 refrences.

Please refer below sandbox link: https://codesandbox.io/s/eager-kowalevski-x20nl

Explanation:

In below code I am storing references to setName function, just to verify whether it's same function or not. I am storing in two variables at window level. If the first variable is being stored, I store it in second one so that later I can compare. When I compare these two, they are different. Not a single occurence I get the console message saying "true". So each time a different function is being created.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("asutosh");
  if (window.s1) {
    window.s2 = setName;
  } else {
    window.s1 = setName;
  }
  console.log(window.s1 === window.s2);

  return (
    <div className="App">
      <h1>Hello {name}</h1>
    </div>
  );
}

Buoyage

Could you explain the sandbox a little more? The code doesn't run for me – Bamboo

@Bamboo I have added explanation. And the code works. It just prints console messages, nothing on the UI to see. – Buoyage

Answer 2

Functional components will re-allocate memory for functions on every rendering.

For class-based components, one should manually do function bindings in constructor:

constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
}

This allows us to avoid memory allocations for the onChange function in the class components.

On other hand, the set functions of the functional components will always be a new instance on every render. When a functional component re-renders a new instance of set function is created.

Here is a sandbox confirming that: https://codesandbox.io/p/sandbox/frosty-pine-82klp8

import React, { useState } from "react";
import "./styles.css";

let prevFunction;

export default function App() {
  const [name, setName] = useState("asutosh");
  
  // Save reference to the setName function in a global variable
  if (!prevFunction) 
    prevFunction = setName;

  if (name == "asutosh") {
    // Force component re-render
    setTimeout(() => {
      setName("bawutosh");
    }, 1000);
  }

  return (
    <div className="App">
      <h1>Hello {name}</h1>
      <p>
        {prevFunction === setName
          ? "setName is the same"
          : "setName is different"}
      </p>
    </div>
  );
}

Bree