Why need useRef and not mutable variable?

useRef will assign a reference for each component, while a variable defined outside a function component scope will only assigned once.

useRef reference life span is component’s life span (it “dies” when the component unmounts, while JS variables are scope-blocked).

Hence, define constant purpose variables outside of the component scope:

// This statement will only called once
const DEFAULT_VALUE = 5;

function Component() {
  // use DEFAULT_VALUE.
}

Defining the same statement inside component’s scope, will redefine it on every render:

// We can do better
function Component() {
  // Redefined on every render
  const DEFAULT_VALUE = 5;
}

---

Now for the question:

First, we can’t actually reflect UI changed with outer scoped variables since changing them does not trigger render (only React API does).

Therefore the reflected value is its closure value.

let countCache = 0;

function Counter() {
  ...
  countCache = 0;

  useEffect(() => {
    countCache = count;
  });
  ...

  // closure value of countCache
  return <div>{countCache}</div>
}

---

Now, whats special with outer scope variables that they are global to the module itself, so using its value is global to all components referencing it (in the module).

For example if you want to count how many times the component mounted in your whole application life span, increase the variable inside useEffect on mount (couldn’t find any other possible use-case).

let howMuchMounted = 0;

function Component() {
  useEffect(() => { howMuchMounted += 1, [] };
}

To reflect the differences of outer variable and useRef reference, in the next example, on button click, you may notice that the variable is global for both of the components, while the reference is always updated to current state value.

import React, { useEffect, useRef, useReducer } from "react";
import ReactDOM from "react-dom";

// defined a variable outside function component
let countCache = 0;

function Counter() {
  const [num, count] = useReducer((num) => num + 1, 0);

  const countRef = useRef(count);

  useEffect(() => {
    // set count value on count change
    countCache = num;
    countRef.current = num;
  }, [num]);

  return (
    <>
      <button onClick={count}>Count</button>
      <h3>state {num}</h3>
      <h3>variable {countCache}</h3>
      <h3>reference {countRef.current}</h3>
    </>
  );
}

export default function App() {
  return (
    <>
      <Counter />
      <hr />
      See what happens when you click on the other counter
      <hr />
      <Counter />
    </>
  );
}

---

Please see a follow up question on useEffect use cases, there are many common mistakes when working with useRef references inside useEffect.