Implementé un temporizador que funciona bien, pero el único problema es que no borra Interval cuando finaliza el temporizador.
Mi código se ve así:
const [currentCount, setCurrentCount] = React.useState(10); const [intervalId, setIntervalId] = React.useState(10); React.useEffect(() => { const intervalId = setInterval(timer, 1000); // store intervalId in the state so it can be accessed later: setIntervalId(intervalId); return () => { clearInterval(intervalId); }; }, []); const timer = () => { setCurrentCount((prev) => { if (prev > 0) { return prev - 1; } else if (prev === 0) { console.log("Still Runs"); clearInterval(intervalId); return prev; } }); }; El valor de currentCount disminuye de 10 a 0, pero quiero borrar el intervalo cuando llega a 0 y traté de borrarlo con este fragmento de código clearInterval(intervalId) pero no funcionó.
¿Cómo puedo clearInterval cuando el valor de currentCount llega a 0?
A su gancho useEffect le falta una dependencia importante de su matriz de dependencia: timer . Para simplificarte las cosas, puedes mover la variable del timer dentro del efecto (a menos que tengas una buena razón para que esté afuera). Esto termina teniendo la ventaja adicional de que la función del timer podrá hacer referencia a la ID del intervalo sin mantenerlo en estado.
const [currentCount, setCurrentCount] = React.useState(10); React.useEffect(() => { const timer = () => { setCurrentCount((prev) => { if (prev > 0) { return prev - 1; } else if (prev === 0) { console.log("Still Runs"); clearInterval(intervalId); return prev; } }); }; const intervalId = setInterval(timer, 1000); return () => { clearInterval(intervalId); }; }, []);