how to stop setInterval in react native

Question

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

Answer 1

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