How to trigger a function at regular intervals of time using hooks and when certain criteria is met I want to clear the time interval?

Question

I have a react component that performs a certain task at regular intervals of time after mounting. But I want to clear the interval once after a criterion is met. How can I achieve that?

My code

const [totalTime, setTotalTime] = React.useState(10000);

const foo = () => {
      console.log("Here");
  };

React.useEffect(() => {
    const secondInterval = setInterval(() => {
      if (totalTime > 0) setTotalTime(totalTime - 1000);
    }, 1000);
    return () => clearInterval(secondInterval);
  });

React.useEffect(() => {
    let originalInterval;
    if (totalTime > 0)
      originalInterval = setInterval(() => {
        foo();
        console.log(totalTime);
      }, 5000);
    return () => clearInterval(originalInterval);
  }, []);

When I watch the console even after 10000ms It is still logging Here and also totalTime is always being 10000ms. I am not able to figure out what exactly is happening.

Answer 1

You may need to pass the older state as an argument to the setTotalTime updater function. You also may need to pass (another) state variable as a dependency to the useEffect hook so that the function is executed every time the state variable changes

React.useEffect(() => {
    const secondInterval = setInterval(() => {
      if (totalTime > 0) setTotalTime(totalTime => totalTime - 1000);
    }, 1000);
    return () => clearInterval(secondInterval);
  }, [...]);

Answer 2

Depends on your criteria, and what you call a criteria, but you could just use another state and then useEffect on that another state:

const [criteriaIsMet,setCriteriaIsMet] = useState(false);
useEffect(() => { if(criteriaIsMet) {clearInterval(...)} },[criteriaIsMet])

And then somewhere when you do your actual "criteria logic" you just go ahead and do setCriteriaIsMet(true)

And how would you know Id of interval in above useEffect - again you could just create a special state that will store that id, and you could set it in your original useEffect

As for why your current code is not clearing the interval is because when you use useEffect with empty array as second argument, and return function in first function argument - that will be execute on component unmounting

And these are just one of numerous options you have actually :)