• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

288
Vistas
setInterval() keeps running even after clearing it using clearInterval()

Most of the answers I found here was to use clearInterval() inside a return statement in a useEffect(). But, still for some reasons it keeps executing.

I'm also getting the following warning in the logs :-

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in StartTest (at SceneView.tsx:126)

attaching the code for Reference.

const [connectionInterval, setConnectionInterval] = useState(null);
const [batteryInterval, setBatteryInterval] = useState(null);
const [heartRateInterval, setHeartRateInterval] = useState(null);

useEffect(() => {
    startServices();
    return () => {
      clearServices();
    };
}, []);


const startServices= () => {
    let ctnInt = setInterval(() => checkConnection(), 5000);
    setConnectionInterval(ctnInt);
    let btryInt = setInterval(
      () =>
        Battery(value => {
          setBattery(value);
        }),
      900000,
    );
    setBatteryInterval(btryInt);
    let hrRtInt = setInterval(
      () =>
        HeartRate(
          hr => {
            if (finish) {
              clearInterval(heartRateInterval);
            }
            let rate = Math.round(hr);
            setHeartRate(rate);
          },
          onError => {
            console.log('API ERROR');
          },
        ),
      3000,
    );
    setHeartRateInterval(hrRtInt);
  };


  const clearServices = () => {
    clearInterval(connectionInterval);
    clearInterval(batteryInterval);
    clearInterval(heartRateInterval);
  };```
about 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

You're not passing any deps to useEffect, so the effect functions never update, and in the version of clearServices that you call, connectionInterval and friends are all still null. See the note here.

In general I would approach setInterval like this:

useEffect(() => {
    const intervalFn = () => {
        console.log('interval fired')
    }
    const intervalId = setInterval(intervalFn, 1000)
    return () => {
        clearInterval(intervalId)
    }
}, [])

(this version really has no deps, because everything is captured inside useEffect. but in practice you would probably have some.)

about 3 years ago · Juan Pablo Isaza Denunciar

0

I had this issue a couple of weeks ago and what I did to stop it was to set a new state after clearing the interval.

For example. I was trying to build a countdown that ran from 30 to 0 and stop at 0. This is what I did

const [timeRemaining, setTimeRemaining] = useState(30);

useEffect(() => {
  let timeLeft = timeRemaining;
  let interval = setInterval(() => {
    if (timeLeft === 0) {
      clearInterval(interval);
      setTimeRemaining(0);
    } else {
      setTimeRemaining((timeLeft -= 1));
    }
  }, 1000);
}, [timeRemaining]);

Setting the state to 0 after clearing the interval was the only way to stop the countdown timer at 0

about 3 years ago · Juan Pablo Isaza Denunciar

0

In useEffect, you should declare dependencies in array after callback function. In the code above, startServices is dependency, because it is declared outside the useEffect.

https://reactjs.org/docs/hooks-reference.html#useeffect

You can learn about useEffect in link.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda