Is useRef Hook a must to set and clear intervals in React?

Question

I'm currently understanding the useRef hook and its usage. Accessing the DOM is a pretty straight forward use case which I understood. The second use case is that a ref behaves like an instance field in class components. And the react docs provide an example of setting and clearing a time interval from a click handler. I want to know, if cancelling the time interval from a click handler is not required, can we set and clear intervals with local variables declared within useEffect like below? Or is using a ref as mentioned in the docs always the approach to be taken?

useEffect(() => {
 const id = setInterval(() => {
  // ...
  });
  return () => {
    clearInterval(id);
  };
})

Answer 1

As stated at the docs you shared;

If we just wanted to set an interval, we wouldn’t need the ref (id could be local to the effect).

  useEffect(() => {
    const id = setInterval(() => {
      setCounter(prev => prev + 1);
    }, 1000);
    return () => {
      clearInterval(id);
    };
  });

but it’s useful if we want to clear the interval from an event handler:

// ...
function handleCancelClick() {
  clearInterval(intervalRef.current);
}
  // ...

Answer 2

I think the example is just for demonstrating how useRef works, though I personal cannot find many use case for useRef except in <input ref={inputEl} /> where inputEl is defined with useRef. For if you want to define something like an component instance variable, why not use useState or useMemo? I want to learn that too actually (Why using useRef in this react example? just for concept demostration?)

As for the react doc example https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables:

function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  // ...
  function handleCancelClick() {
    clearInterval(intervalRef.current);
  }
  // ...
}

I tried and can achieve the same without useRef as below:

function Timer() {
  const interval = null;

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    interval = id;
    return () => {
      clearInterval(interval);
    };
  });

  // ...
  function handleCancelClick() {
    clearInterval(interval);
  }
  // ...
}