useRef vs. regular variable in React Js

Regular variables get re-initialized every time the component re-renders. But useRef()'s returns the exact reference in each re-render. Therefore, the useRef()'s are an ideal candidate to preserve any values between component re-enders.

For example, if I initialize a regular variable like the one listed below, my regVar variable gets a new random number in each component re-render.

const random = Math.random()
let regVar = random

On the other hand, the same declaration with a useRef() yields a different result. In that case, my refVar is created and initialized when the component first mounts. It returns the same original reference when the component re-renders.

const random = Math.random()
const refVar = useRef(random)

Therefore, refVar.current remains the same between re-renders. The random number is generated when the component is first mounted in this case. That random number will stay the same between re-renders unless I re-assign it by refVar.current = random.

A complete code snippet illustrates the difference between useRef() and regular variables.

import { useRef, useState } from "react"

export const FunctionalComponent = () =>{
   const random = Math.random()
   const refVar = useRef<number>(random)
   let regVar = random
   const [, setUpdate] = useState<boolean>()

   return(<>
      <div>Regvar = {regVar}</div>
      <div>Refvar = {refVar.current}</div> 
      <div><button onClick={() => setUpdate((prev) => !prev)}>Re-render</button></div>
   </>
   )
}