When should you use useRef instead of useState?

Both hooks preserve a value across renders. The difference is what happens when you change it. Setting state schedules a render and gives you a new value for that render. Mutating a ref changes the same object immediately and does not notify React.

function Stopwatch() {
  const [elapsed, setElapsed] = useState(0);
  const intervalRef = useRef(null);

  function start() {
    if (intervalRef.current !== null) return;

    intervalRef.current = setInterval(() => {
      setElapsed((current) => current + 1);
    }, 1000);
  }

  function stop() {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  }

  return (
    <div>
      <p>{elapsed}s</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

Good uses for a ref

• Timer, animation frame or request IDs
• A reference to a DOM node
• The previous value of a prop or state
• A value read by an event callback that should not re-subscribe

Do not use a ref to store something the UI displays. If the screen should change when the value changes, it is state. Do not read or write a ref during render to control behaviour either, because render must stay pure and may run more than once.