Using clearInterval() inside Useeffect is not working. The function in setInterval() keeps getting called

Question

Desired Outcome: I am getting a script's status from an API and then checking what the status is. If the status = 'XYZ', I need to call the getStatus function again (using setInterval), else I just need to return/do nothing.

Issue: The major issue is that clearInterval() is not working and the getStatus() function is getting called after the mentioned interval (10 seconds here) again and again, EVEN THOUGH the status IS NOT EQUAL to 'XYZ'.

Please help out. Thanks in advance.

const [intervalId, setIntervalId] = useState();

useEffect(() => {
    getStatus();
  }, []);

  const getStatus = async () => {
    await getScriptStatus()()
      .then(response => {
        if (response.data[0].status == 'XYZ') {
          setIntervalId(
            setInterval(() => {
              getStatus();
            }, 10000)
          );
        }
        else
           return () => clearInterval(intervalId);
      })
      .catch(error => {
        errorMessage(error);
      });

UPDATE: Using React.useRef() instead of useState() for intervalId and clearing interval before using setInterval() in the 'if' condition worked or me. Thank you for the helpful answers.

Answer 1

Use setTimeout instead of using setInterval .

For more details visit: Documentation on setTimeout

Answer 2

Main problem here is most probably that you are installing new intervals recursively : function installs interval that calls function that installs interval etc, effectively producing cascade of intervals. These are more or less in-revocable, because their IDs live ephemerally in function scope that installed them and are then thrown away.

You can observe it with slightly modified version of your code in this sandbox .

Answer 3

intervalId doesn't need to be a "state", rather store is as a ref and not a state.

• Notice I changed your function from using .then().catch() to using async/await .
• I think that the problem you're facing is caused because React State is asynchronous - the setIntervalId didn't update the intervalId yet, when you're trying to already access intervalId 's new value

const intervalId = useRef(null);

const getStatus = async () => {
    try {
        const response = await getScriptStatus()()
        if (response.data[0].status == 'XYZ') {
            intervalId.current = setInterval(getStatus, 10000);
        }
        else return () => clearInterval(intervalId.current);
    } catch (error) {
        errorMessage(error);
    }
}

Another suggestion:

The getStatus function should not act as a useEffect-function, because it's very confusing to see that getStatus returns a function.. and then you need to trail back to "AH it's a useEffect-function.. and the function returned is a cleanup function.. " - not good.. .

so.. My Suggested Options for that:

• Either change the getState function to only getStatus.. and then when you call it from inside the useEffect - also handle the case in which you want to return a function (cleanup function)
• Less suggested: Have all the content straight inside the useEffect . And since you want to use async/await -> create a self-calling-async-function: useEffect(()=>{ (async () => { await func(); })(); }, []);

Update:

In addition to all that ^ You really don't need the setInterval (like others have suggested). setTimeout will do just fine. But you might still want the clearTimeout (changed from clearInterval) if the functio might be called on different occasions

Answer 4

Change return () => clearInterval(intervalId); to this clearInterval(intervalId); .