How to stop setInterval inside useEffect hook when certain value is reached? [React]-CodePudding

I have the following state variable

const [value, setValue] = useState(0);

and useEffect hook

let intervalID;
useEffect(() => {
  intervalID = setInterval(() => {
    setValue(value => value 1);
  }, 100)
}, [])

I want the setInterval function to stop when value reaches 100; How can I achieve this?

I tried if(value < 100 ) clearInterval(intervalID) inside setInterval but it didn't work.

CodePudding user response：

That's because your intervalID is resetting on every state update. you need to store intervalId in ref so that it doesn't changes between state updates.

const [value, setValue] = useState(0);

// store intervalID in ref, initialy it's null
const intervalID = useRef(null);
useEffect(() => {
  
  // store intervalId in ref current property
  intervalID.current = setInterval(() => {
    if(value>100){
      // clear interval
      clearInterval(intervalID.current);
      intervalID.current = null;
      return;
    }
    setValue(value => value 1);
  }, 100);
  
 // clear interval if component unmounts before value reaches 100
  return ()=>clearInterval(intervalID.current)
}, [])

CodePudding user response：

const [value, setValue] = useState(0);

const intervalID = useRef(null);
useEffect(() => {
    intervalID.current = setInterval(() => {
        if (value < 3) {
            console.log('Set Interval')
            setValue(value => value   1);
        }
        else
        {
            console.log('Clear Interval')
            clearInterval(intervalID.current);
            intervalID.current = null;
        }
    }, 1000);
    
    return () => clearInterval(intervalID.current)

}, [value])

return (
    <>Interval Value: {value}</>
)