useInterval

useInterval (주기적 실행)

useInterval 훅은 주어진 함수를 일정한 간격으로 실행할 수 있게 해주는 타이머를 관리해요.

출처: 문서

본문

인자:

  • fn — 각 인터벌 틱마다 호출되는 함수
  • interval — 각 틱 사이의 밀리초

반환 객체:

  • start — 인터벌 시작
  • stop — 인터벌 중지
  • toggle — 인터벌 토글
  • active — 현재 인터벌 상태

정의 (Definition)

interface UseIntervalOptions {
  /** If set, the interval will start automatically when the component is mounted, `false` by default */
  autoInvoke?: boolean;
}

interface UseIntervalReturnValue {
  /** Starts the interval */
  start: () => void;
  /** Stops the interval */
  stop: () => void;
  /** Toggles the interval */
  toggle: () => void;
  /** Indicates if the interval is active */
  active: boolean;
}

function useInterval(
  fn: () => void,
  interval: number,
  options?: UseIntervalOptions,
): UseIntervalReturnValue

Exported types

UseIntervalOptions와 UseIntervalReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

import type { UseIntervalOptions, UseIntervalReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)