Intenté implementar una función que inicia una cuenta regresiva cuando la variable isPlaying es verdadera y se detiene cuando es falsa, en general, no funciona y todo lo que hace es iniciar varios intervalos simultáneamente, isPlaying cambia cuando el el video se detiene o comienza a reproducirse nuevamente
let interval useEffect(() => { if (isPlaying) { interval = setInterval(() => { setTimePassed((time) => time + 1) }, 1000); } else { console.log('clear interval'); clearInterval(interval); } return () => clearInterval(interval); }, [isPlaying])necesita almacenar su intervalo en el gancho useRef como componente volver a renderizar su valor de intervalo está configurado como indefinido ya que no retiene el estado
let interval = useRef(); useEffect(() => { if (isPlaying) { interval.current = setInterval(() => { setTimePassed((time) => time + 1) }, 1000); } else { console.log('clear interval'); clearInterval(interval.current); } return () => clearInterval(interval.current); }, [isPlaying])Esto es lo que funcionó para mí, simplemente puse el intervalo fuera de los límites de la función y me referí al _id cuando despejé el intervalo.
let interval = null export default function PlayerBar() { const [isReady, setIsReady] = useState(false) const [isPlaying, setIsPlaying] = useRecoilState(store.playingState) const [volume, setVolume] = useState(100) const [duration, setDuration] = useState<number>() const [timePassed, setTimePassed] = useState<number>(0) // const [intervalStatus, setIntervalStatus] = useState<any>() const player = useRef<any>() const timePassedStatus = useMemo(() => duration - timePassed, [timePassed]) const durationStatus = useMemo(() => ('' + (duration / 60)).split('.').join(':'), [duration]) useEffect(() => { if (isPlaying) { interval = setInterval(() => { setTimePassed((time) => time + 1) }, 1000); }else if(interval){ clearInterval(interval._id) } return () => {clearInterval(interval)}; }, [isPlaying]) }