Variables vs Refs vs States in React

In React, variables, refs, and states allow you to store and mutate data. But they work in different ways.

Here are the main distinctions between them:

	Variable	Ref	State
Value persists during re-rendering	No	Yes	Yes
Updating value triggers re-rendering	No	No	Yes
Is a pure JavaScript container	Yes	No	No

How Do Variables Work in React?

A variable’s value does not persist during re-rendering. Its value resets at the beginning of a new rendering.

import { useState } from "react";

function App() {
  let myVar = 0;
  const [myState, setMyState] = useState(0);

  function updateVar() {
    myVar = myVar + 1;
    console.log("myVar =", myVar);
  }

  function updateState() {
    setMyState(myState + 1);
  }

  return (
    <div>
      <h2>Variable: {myVar}</h2>
      <h2>State: {myState}</h2>
      <button onClick={updateVar}>Update Variable</button>
      <button onClick={updateState}>Update State</button>
    </div>
  );
}

export default App;

Try Editing It

The snippet above will:

• Increment the variable’s value when you click the “Update Variable” button. This modification does not trigger a re-rendering of the component because React does not track a variable’s changes.
• Increment the state’s value when you click the “Update State” button. This modification triggers a re-rendering of the component because React requests a re-render whenever you modify the state.
• Reset the variable’s value to zero (0) during each re-rendering of the App component. Therefore, the rendered variable’s value will always be zero (0).

How Do Refs Work in React?

A ref’s value persists during re-rendering but modifying it does not cause React to re-render the component. In other words, a ref contains a plain JavaScript object whose value React remembers while re-rendering your component. But React does not track changes to the ref’s value. So, its modifications do not trigger a new rendering.

import { useState, useRef } from "react";

function App() {
  const myRef = useRef(0);
  const [myState, setMyState] = useState(0);

  function updateRef() {
    myRef.current = myRef.current + 1;
    console.log("myRef =", myRef);
  }

  function updateState() {
    setMyState(myState + 1);
  }

  return (
    <div>
      <h2>Ref: {myRef.current}</h2>
      <h2>State: {myState}</h2>
      <button onClick={updateRef}>Update Ref</button>
      <button onClick={updateState}>Update State</button>
    </div>
  );
}

export default App;

Try Editing It

The snippet above will:

• Increment the ref’s value when you click the “Update Ref” button. This modification does not trigger a re-rendering of the component because React does not monitor the ref’s changes.
• Increment the state’s value when you click the “Update State” button. This modification triggers a re-rendering of the component because React requests a re-render whenever you modify the state.
• Retains the ref and state’s value during each re-rendering of the App component.

CodeSweetly ads

How Do States Work in React?

A state’s value persists during re-rendering. Modifying it also causes React to re-render the component.

import { useState, useRef } from "react";

function App() {
  let myVar = 0;
  const myRef = useRef(0);
  const [myState, setMyState] = useState(0);

  function updateVarAndRef() {
    myVar = myVar + 1;
    myRef.current = myRef.current + 1;
    console.log("myVar =", myVar);
    console.log("myRef =", myRef);
  }

  function updateState() {
    setMyState(myState + 1);
  }

  return (
    <div>
      <h2>Variable: {myVar}</h2>
      <h2>Ref: {myRef.current}</h2>
      <h2>State: {myState}</h2>
      <button onClick={updateVarAndRef}>Update Variable and Ref</button>
      <button onClick={updateState}>Update State</button>
    </div>
  );
}

export default App;

Try Editing It

The snippet above will:

• Increment the variable and ref’s value when you click the “Update Variable and Ref” button. This modification does not trigger a re-rendering of the component because React does not monitor the variable and ref’s changes.
• Increment the state’s value when you click the “Update State” button. This modification triggers a re-rendering of the component because React requests a re-render whenever you modify the state.
• Resets the variable’s value during each re-rendering of the App component but retains the ref and state’s data.