在包含 useEffect 的组件上调用 API (React Native) 时，cleraInterval () 不起作用

Question

how to stop setInterval on on the component that contains the APi call ??

example case

.....

useEffect(() => {
  getDataFromApi()
})


let count = 0;
let interval = setInterval(function(){

    // increasing the count by 1
    count += 1;

    // when count equals to 5, stop the function
    if(count === 5){
        clearInterval(interval);
    }

    // display count
    console.log(count);

}, 2000);

but in case program not stop when after five times

Answer 1

if you are attempting to only run the effect once on mount, then you need to add the second param to the useEffect function to do that.

// by putting this logic in the useEffect, you are creating a clousure that will prevent interval from being mutated on every render.
useEffect(() => {
  getDataFromApi()


  let count = 0;
  let interval = setInterval(function(){

  // increasing the count by 1
  count += 1;

  // when count equals to 5, stop the function
  if(count === 5){
    clearInterval(interval);
  }

  // display count
  console.log(count);

  }, 2000);
}, [])

the reason the code doesn't stop is because the component is mutating the reference to the original interval everytime the component rerenders. For this reason, you really shouldn't use a setInterval in a component render method.

Answer 2

you can achieve this by creating a interval variable first and clearActiveInterval function like this

let count = 0;
let interval = null;

function clearActiveInterval() {
  clearInterval(interval);
}

rest of you code implementation would be like this

interval = setInterval(function () {
  // increasing the count by 1
  count += 1;

  // when count equals to 5, stop the function
  if (count === 5) {
    clearActiveInterval();
  }

  // display count
  console.log(count);
}, 2000);