setInterval() keeps running even after clearing it using clearInterval()-CodePudding

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);
          },
          one rror => {
            console.log('API ERROR');
          },
        ),
      3000,
    );
    setHeartRateInterval(hrRtInt);
  };


  const clearServices = () => {
    clearInterval(connectionInterval);
    clearInterval(batteryInterval);
    clearInterval(heartRateInterval);
  };```

CodePudding user response：

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

CodePudding user response：

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.)

CodePudding user response：

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.