useInterval

window.setInterval을 편리하게 사용할 수 있는 커스텀 훅입니다.

window.setInterva과 useInterval 훅의 주요 차이점은 그 인수가 동적이라는 것입니다.

delay의 값으로 null을 넣으면 타이머를 중지할 수 있습니다.

Interface

type SetIntervalParameters = Parameters<typeof setInterval>;

const useInterval: (callback: SetIntervalParameters[0], delay?: SetIntervalParameters[1]) => void

Usage

import { useInterval } from '@devgrace/react';

const Example = () => {
  const [number, setNumber] = useState(0);
  const [isPlaying, setIsPlaying] = useState(true);

  useInterval(() => setNumber(number + 1), 1000);

  return (
    <div>
      <div>{number}</div>
      <button onClick={() => setIsPlaying(false)}>button</button>
    </div>
  );
};