useEffect에서 setInterval 사용할시 주의점

unmount될때 또는 의존성 배열이 업데이트될 때 return 값에 넣어논 뒷정리 함수가 발생되어 백그라운드에서 중첩되어 돌  아갈 setInterval을 정리해준다.

 

예시

useEffect(() => {
    const intervalId = setInterval(() => {
      const newElapsedTimes = [];
      mqttMessages.forEach((item) => {
        if (Number(item.compCd) === compCd) {
          const pastTime = moment(item.Now);
          const currentTime = moment();
          const difference = moment.duration(currentTime.diff(pastTime));
          const milliseconds = difference.asMilliseconds();
          newElapsedTimes.push(moment.utc(milliseconds).format('HH:mm:ss'));
        }
      });
      setElapsedTimes(newElapsedTimes);
    }, 5000);
    return () => clearInterval(intervalId);
  }, [mqttMessages, compCd]);