ClearInterval Not working in React Native

Question

i'm try to clear interval when the user in not in the detail section and if match the status is 1, my code like this:

useEffect(() => {
    console.log(section)
    console.log('ini interval lo', interval)
    if (section !== "detailCheckIn") {
      clearInterval(interval);
      console.log('aa', clearInterval(interval) ? true : false)
    }

    console.log('section di : ', section)
  }, [section]);

  const checkStatus = (data) => {
    console.log('datanya nih ', data)

    interval = setInterval(() => {

      console.log('ini test interval', userToken)
      consume.getWithParams('CheckinInfo', {}, { token     }, { checkin_id: data })
        .then(response => {

          console.log('ini tuh response', response)
          //ubah jadi 1 kalomau final test
          if (response.result.status === 1) {
            navigation.navigate('Service')
            clearInterval(interval);
            console.log('di clear')
            AsyncStorage.setItem('isCheckIn', 'udah check in nih')
          }

        })
        .catch(err => {
          console.log(err)
          console.log('token error', token)
        })

    }, 2000);
  }

when i'm console log the clear interval, that return false

Answer 1

Try this. Notice the use of useRef to store a single reference to _interval , and how this is only ever changed through the functions clearCurrentInterval and replaceCurrentInterval .

If you only update your interval through these two functions, you can be sure you will only ever have one interval at a time, as your previous interval always gets cleared first.

  const _interval = useRef(null);
  const interval = () => _interval.current;

  const clearCurrentInterval = () => {
    clearInterval(interval());
  };

  const replaceCurrentInterval = (newInterval) => {
    clearCurrentInterval();
    _interval.current = newInterval;
  };

  useEffect(() => {
    console.log(section);
    console.log("ini interval lo", interval());
    if (section !== "detailCheckIn") {
      clearCurrentInterval();
    }

    console.log("section di : ", section);
  }, [section]);

  const checkStatus = (data) => {
    console.log("datanya nih ", data);

    const newInterval = setInterval(() => {
      console.log("ini test interval", userToken);
      consume
        .getWithParams("CheckinInfo", {}, { token }, { checkin_id: data })
        .then((response) => {
          console.log("ini tuh response", response);
          //ubah jadi 1 kalomau final test
          if (response.result.status === 1) {
            navigation.navigate("Service");
            clearCurrentInterval();
            console.log("di clear");
            AsyncStorage.setItem("isCheckIn", "udah check in nih");
          }
        })
        .catch((err) => {
          console.log(err);
          console.log("token error", token);
        });
    }, 2000);

    replaceCurrentInterval(newInterval);
  };

However, depending on how you're using this, you might be better off just having a useEffect that creates a single interval when the component mounts, and clears it when it unmounts or gets the API response you want.