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?

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>
  );
}