RequestAnimationFrame won't stop logging

Question

let stopId;

const playVideo = () =>{
    if(isPlaying){
        videoRef.current.pause()
        window.cancelAnimationFrame(stopId)
    }else{
        videoRef.current.play();
        window.requestAnimationFrame(calcTime)
    }
    setIsPlaying(!isPlaying)
}

const calcTime = () =>{
    stopId = window.requestAnimationFrame(calcTime)
    console.log('hey')
}

This is for the seeker animation for a video player. I was console logging something when I noticed that it wouldn't stop logging despite pausing the video. The seeker animation stopped but the logging is still going.

Another thing I tried is:

const calcTime = () =>{           
    stopId = window.requestAnimationFrame(calcTime)
    console.log('hey')
    setTimeout(() => {
        videoRef.current.pause()
        window.cancelAnimationFrame(stopId)
        console.log('pause')
    }, 5000);
}

This would log 'hey' 300 times before stopping and then log 'paused' 300 times before stopping too. I'm so confused on what is happening. Does this mean that the request is still happening when the video is paused and is there going to be a performance issue?

Answer 1

I see my problem now. Since I'm using React, the stopId is getting nuked whenever the state changes. So I attached a useRef to it and set stopId.current = window.requestAnimationFrame(calcTime) and now it properly stops