CODEWITHSUNDEEP
javascriptreact-nativesetinterval
orenzo foods
orenzo foods

Reputation: 73

how to stop setInterval in react native

i am running a setinterval function to check for a payment from coinbase in my react native app, i run the function after every 10 seconds, after the payment has been made, i clear the setinterval and navigate to the homepage, but still the setinteval keeps running how can i stop this?

      useEffect(() => {
        getData();
        myinterval();
      }, []);
    
      const myinterval= () => setInterval(function () {
        checkCharge();
      }, 10000);

      const stopCounter = () => {
        clearInterval(myinterval);
      }

  const checkCharge = async () => {
    try {
      ...SOME_CODE_HERE...
      stopCounter()        
      navigation.navigate("HomeScreen");
          
    } catch (e) {
      console.log(e);
    }
  };

Upvotes: 2

Views: 5406

Answers (5)

PedroTNascimento
PedroTNascimento

Reputation: 173

Just in case someone is using Animated component and intervals, I had to clear the interval in the callback function in the start method, clearing the interval after or before was not clearing at all.

Animated.timing(
        dynamicCircle,
        {
          toValue: 0,
          useNativeDriver: true,
          duration: 1,
        }
      ).start(() => {
        clearInterval(circleAnimationInterval);
      });

Upvotes: 0

Nur Cloud
Nur Cloud

Reputation: 1

Hold myinterval in a state

import { useState } from 'react'

const [refreshId, setRefreshId] = useState() 

const myInterval = setInterval(function () { checkCharge() }, 10000)

setRefreshId(myInterval)

const stopCounter = () => { clearInterval(refreshId) }

Upvotes: 0

Curtis Crentsil
Curtis Crentsil

Reputation: 511

i ran into a similar problem some months back, this soluion should work perfectly:

const myinterval = setInterval(function () {
      checkCharge();
 }, 10000);

but in my case, since I store the setInterval in a variable instead of a function, I had some weird problems, like the setInterval might run three times or keep on running even after I used clearInterval(INTERVAL_NAME); so if you want to check if a payment has been made, create a button that would tell the user to click when they have made the payment, this would be a lot safer than to run the function inside of setInterval

Upvotes: 2

Patrick Cerny
Patrick Cerny

Reputation: 478

I believe it's because myinterval is assigned to a function and not the actual return value of the setInterval() function. So try to change

const myinterval = () => setInterval(function () {
        checkCharge();
      }, 10000);

to

const myinterval = setInterval(function () {
        checkCharge();
      }, 10000);

and then canceling the myinterval variable with clearInterval(myinterval);

Upvotes: 2

2pichar
2pichar

Reputation: 1378

You aren't using the return from myinterval() to clear the setInterval. setInterval() returns an id that is used to clear the interval. When you call the function myinterval, it is returning that ID. What you need to do is store that ID in a variable that you can use to clear the interval.

...
function createInterval(){
    return setInterval(checkCharge, 10000);
}

function stopCounter(id){
    clearInterval(id);
}
...
var id = createInterval();
...

function checkCharge(){
    try {
        ...
        stopCounter(id);
        ...
    } catch(e){
        console.error(e);
    }
}

Upvotes: 0

Related Questions