Why need useRef and not mutable variable?

Question

I have read A Complete Guide to useEffect - Swimming Against the Tide at Overreacted.

The example shows that if we want to get the latest count, we can use useRef to save the mutable variable, and get it in async function laster:

function Example() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);

  useEffect(() => {
    // Set the mutable latest value
    latestCount.current = count;
    setTimeout(() => {
      // Read the mutable latest value
      console.log(`You clicked ${latestCount.current} times`);
    }, 3000);
  });
  // ...
}

However, I can do the same thing by creating a variable outside the component function, such as:

import React, { useState, useEffect, useRef } from 'react';

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

function Counter() {
  const [count, setCount] = useState(0);
  countCache = count;       // set default value

  useEffect(() => {
    setTimeout(() => {
      // We can get the latest count here
      console.log(`You clicked ${countCache} times (countCache)`);
    }, 3000);
  });
  // ...
}

export default Counter;

Are both ways practical, or is there anything bad if I define the variable outside function component?

Dennis Vash · Accepted Answer · 2021-05-24 16:18:58Z

54

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.

edited May 24, 2021 at 16:18

answered Aug 10, 2019 at 17:52

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

PJCHENder Over a year ago

I gave the wrong code. Now I replace countCache = 0; with countCache = count;. The results show as same as useRef, and can use <div>{countCache}</div> in render as well.

Dennis Vash Over a year ago

Still the answer the same, try making more than one counter see what happens.

PJCHENder Over a year ago

I have add another counter, i.e., counterOne, counterTwo, in the component, and create two variables outside the function, i.e., cacheCounterOne, cacheCounterTwo`. However, I did not find anything weird. It looks fine... Could you give me more hints?

Dennis Vash Over a year ago

I added an example check it out

James H. Over a year ago

I found this answer just explain the basis difference of global versus local variables. Whenever the component is dead, its local scope variables are dead as well. The global variable is useful when you have a one file hosts all tiny related components which reference to some shared variables such as button theme, translation, color based devices, etc since the global variable will not die or re-init when any of these tiny components re-render.

|

KJ Sudarshan · Accepted Answer · 2022-04-22 04:17:45Z

21

There are differences between the following four possible variations:

A variable inside the function component
A variable outside the function component
A state variable returned by useState()
A variable ( an object with property 'current' ) returned by useRef()

The last 2 can only be used within the component.

Let's take each case:

1. A variable inside the function component

Initialization: Variables are always re-initialized both on every render and consequently in multiple component instances

Variable Updates: Can be updated except const

Render: No render is triggered by React, and hence updated values are not reflected

2. A variable outside the function component

Initialization: Variables are initialized only when the file is loaded. And the file is loaded only once, irrespective of how many components consume the exports from the file. This is the main difference compared to using useRef(). If there is only one component instantiation, it would be same as useRef().

Variable updates: Can be updated except const

Render: No render is triggered by React, and hence updated values are not reflected

3. A state variable returned by useState()

Initialization: Variables are initialized only when the component is mounted, irrespective of the number of renders. However, each component instance gets it's own copy of state variables.

Variable updates: Can be updated using the state updater function.

Render: Render is triggered by React after the state variable is updated ( multiple updates may be batched into a single render )

4. A variable ( an object with property 'current' ) returned by useRef()

Initialization: Variables are initialized only when the component is mounted, irrespective of the number of renders. However, this will independently initialize the variable for each component instance in contrast to when it occurs only once when using a variable outside the component

Variable updates: Can be updated using the 'current' property

Render: No render is triggered by React, and hence updated values are not reflected

Choosing any of the above will largely depend on the requirement, but we have the necessary tools in our toolbox to get almost all the use cases covered.

edited Apr 22, 2022 at 4:17

answered Apr 21, 2022 at 10:04

KJ Sudarshan

3,2981 gold badge32 silver badges24 bronze badges

3 Comments

R Claven Over a year ago

I might print this out and put it on my wall. Well done.

gaming123 Over a year ago

This answer is very well done.

El Mahdi Ben Moumen Over a year ago

This answer is a whole complete article. Well done!

Collectives™ on Stack Overflow

Why need useRef and not mutable variable?

2 Answers 2

9 Comments

1. A variable inside the function component

2. A variable outside the function component

3. A state variable returned by useState()

4. A variable ( an object with property 'current' ) returned by useRef()

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1. A variable inside the function component

2. A variable outside the function component

3. A state variable returned by useState()

4. A variable ( an object with property 'current' ) returned by useRef()

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related