Difference between useRef and normal variable

Question

I wonder about the difference between these 2 codes

1 :

import React from "react";
import ReactDOM from "react-dom";


function App() {
  const myref = React.useRef(0);

2:

import React from "react";
import ReactDOM from "react-dom";

let myref = 0;
function App() {
 

Now at any point I can mutate both values and both are kept in the dom. What is their difference in usage.

Answer 1

I think that the difference is about the Component packaging and exporting. Let's say you import App from the file, this doesn't mean the whole file is exported, this is a module, only the exported App component gets exported. So when you use ref, you have the access to a persistent variable without going outside of the component scope, so you can still use it when exporting.

Also how would you differentiate between multiple instances of the App component that might need a different value with the same variable? useRef() automatically distinguishes those.

Answer 2

React.useRef(0) is part of the component life-cycle. If you render two different App in your application, those two ref won't collide. They will if you refer to the same shared and mutable variable, like in your second example. You will have a situation where one instance of App will have unintended side effects to the second instance of App.