Values That Do Not Re-render

Example

Changing ref.current does not re-render. Use it for timer ids, previous values or counters that the UI does not show directly.

import { useState, useRef } from 'react';

export default function App() {
  const [sec, setSec] = useState(0);
  const timerRef = useRef(null);

  const start = () => {
    if (timerRef.current) return;           // already running
    timerRef.current = setInterval(() => setSec((s) => s + 1), 1000);
  };
  const stop = () => {
    clearInterval(timerRef.current);
    timerRef.current = null;
  };
  return (
    <div>
      <h2>{sec}s</h2>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

Result