Values That Don't Render

A ref can hold any value, not just an element. Think of it as a box that React keeps for the component from one render to the next: you put something into ref.current, and it's still there in the next render. And unlike state, changing ref.current doesn't make React render again.

That's just right for things that your code needs but the page doesn't show. A typical one is the id of an interval that one click starts and another click stops:

const intervalRef = useRef(null);

function handleStart() {
    intervalRef.current = setInterval(() => {
        setSeconds((seconds) => seconds + 1);
    }, 1000);
}

function handleStop() {
    clearInterval(intervalRef.current);
}

Why not something else?

• A plain variable, let intervalId; in the component, doesn't survive a render. At each render, React calls the component function again, and it starts with a new, empty intervalId. A second later, the interval has changed the time, the component has rendered again, and the id is gone: Stop has nothing to stop.
• State would keep the id, but every change of state renders again, and the page doesn't show the id at all.

So: state for what the page shows, a ref for what only your code needs.

In the stopwatch, an effect started the interval whenever the stopwatch began to run, and the cleanup stopped it. Here, the click handlers start and stop the interval themselves, so its id has to wait somewhere between the two clicks.