setInterval in react

setInterval Type

react에서 setInterval의 아이디를 useRef로 받으려 했으나 타입이 NodeJS.Timer라는 타입으로 setInterval 리턴이 표시되어서 그것으로 지정하면 되지 않았다
그래서 window.setInterval로 수정 후 아래와 같이 지정할 수 있었다

useRef<number>

clearInterval

일반적으로 setInterval안에서 일정 조건이 되면 clearInterval을 호출해서 멈추게 할 수 있다

const timerRef = useRef<number>();
const countRef = useRef<number>(0);

timerRef.current = window.setInterval(() => {
  countRef.current += 1;
  if (countRef.current >= 3) {
    successCallback();
    window.clearInterval(timerRef.current);
  }
}, delay)

무한루프 해결

여기서 만약 멈추지 않고 계속 타이머가 실행된다면
setInterval 앞에 flag를 달아서 early return 하면 된다

const timerRef = useRef<number>();
const countRef = useRef<number>(0);

useEffect(() => {
  if (countRef.current >= 3) {
    // flag 조건이면 더 이상 setInterval 이 실행되지 않게 막는다
    return;
  }
  timerRef.current = window.setInterval(() => {
    countRef.current += 1;
    if (countRef.current >= 3) {
      // do something on finish
      successCallback();
      window.clearInterval(timerRef.current);
    }
  }, delay)
  return () => window.clearInterval(timerRef.current);
});