polling을 위한 커스텀 훅이다.

코드

import { useEffect, useState, useCallback, useRef } from 'react';

function usePolling(task: () => any, interval: number, immediate = false) {
  const intervalSeq = useRef<number>(-1);
  const [status, setStatus] = useState<'on' | 'off'>('off');

  useEffect(() => {
    return () => {
      if (status === 'on') {
        stop();
      }
    };
  }, []);

  const start = useCallback(() => {
    console.log('::: register polling');
    if (immediate) {
      task();
    }
    intervalSeq.current = window.setInterval(task, interval);
    setStatus('on');
  }, [task]);

  const stop = useCallback(() => {
    console.log('::: unregister polling');
    window.clearInterval(intervalSeq.current);
    setStatus('off');
  }, [task]);

  return {
    start,
    stop,
  };
}

export default usePolling;

사용예시

function Test() {
  const [pollingCnt, setPollingCnt] = useState<number>(0);
  const polling = usePolling(() => setPollingCnt(pollingCnt++), 3000);
 
  useEffect(() => {
	polling.start();
    return polling.end;
  }, [])
  
  return (
    <div>
      {pollingCnt}
    </div>
  )
}