即使在使用 clearInterval() 清除 setInterval() 后，它也会继续运行

Question

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);
  };```

Answer 1

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

Answer 2

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

Answer 3

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.