Custom Hooks SetInterval - reactjs

Question

I'm following this article by Dan Abramov:
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
In the article, Dan makes a custom useInterval hook, to create a dynamic setInterval.
The hook looks like this:
export default function useInterval(callback, delay) {
//this useInterval function will be called whenever the parent component renders.
// on render, savedCallback.current gets set to whatever the callback is, if the callback
// has changed
const savedCallback = useRef();
console.log("called")
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
/**
* Likewise, the set interval is set off,
* and if delay is
*/
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => {
console.log("clearEed!")
clearInterval(id);
}
}
}, [delay]);
}
There's a part I don't understand though, which is here:
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => {
console.log("clearEed!")
clearInterval(id);
}
}
}, [delay]);
I understand that this useEffect is called if the delay is changed. The callback is assigned to tick, then if the delay isn't null, id is set to the SetInterval, with tick and the delay as parameters. This all makes sense. But what happens next is strange to me. I know useEffect can take a return statement for when the component unmounts, but why are we clearing the interval we set just before? I'd really appreciate it if someone could talk me through this.
In particular, I'd really like help understanding these lines:
if (delay !== null) {
let id = setInterval(tick, delay);
return () => {
console.log("clearEed!")
clearInterval(id);
}
}
I'm using it like this:
function TimerWithHooks() {
let [count, setCount] = useState(0);
let [delay, setDelay] = useState(1000);
useInterval(() => {
setCount(count + 1);
}, delay)
const handleDelayChange = evt => {
setDelay(Number(evt.target.value))
}
return (
<>
<h1>{count}</h1>
<input value={delay} onChange={handleDelayChange} />
</>
);
}
export default TimerWithHooks;

Answer 1

Effects with Cleanup
When exactly does React clean up an effect?
React performs the cleanup when the component unmounts. However, as we
learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs
and how to opt out of this behavior in case it creates performance
issues later below.
This means that every time the delay changes, the Effect will cleanup previously effects, thus it will clear the timer every time we change the delay and NOT when the component unmounts. This way, we can adjust the timer dynamically without having to worry about clearing the timers.

Answer 2

I guess Dan clear timer when the component will unmount, but I think beater make this after the function executed. something lick this:
useEffect(() => {
if (delay !== null) {
let timerId = setInterval(
() => {
savedCallback.current();
clearInterval(timerId);
},
delay
);
}
}, [delay]);