SetTimeout, SetInterval 관리하기 - React

SetTimeout

useRef에 담아서 unmount 해준다.

ref에는 state와는 달리 새로운 값을 담아도 리렌더링이 일어나지 않는다.

const timer = useRef();

useEffect(() => {
	return {
     if(timer.current) clearTimeout(timer.current); 
    }
});

const onClick = () => {
	timer.current = setTimeout(콜백, 5000);
};

SetInterval

setTimeout에서 useRef에 담는다는 것을 착안하여 만들어진 커스텀 훅

useInterval.jsx

import { useEffect, useRef } from 'react';

const useInterval = (callback, delay) => {
  const savedCallback = useRef(null);

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    const executeCallback = () => {
      savedCallback.current();
    };

    const timerId = setInterval(executeCallback, delay);

    return () => clearInterval(timerId);
  }, []);
};

export default useInterval;