useDependencyTimeout

useTimeout 을 사용해 인자로 전달하는 의존성 배열의 값이 변경되면 Timeout을 재설정하는 커스텀 훅입니다.

첫 번째 인자로 callback 함수를 받습니다. 두 번째 인자로 delay 숫자 혹은 TimerOptions를 받을 수 있습니다. TimerOptions는 delay와 enabled를 포함하는 객체입니다. 세 번째 인자는 의존성 배열인 deps 입니다. 해당 의존성 배열 내 값이 바뀌면 Timeout을 재설정합니다.

Timeout을 직접 핸들링 할 수 있는 set, reset, clear 함수를 포함한 객체를 반환합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

export function useDependencyTimeout(
  callback: () => void,
  delay: number,
  deps: DependencyList
): ReturnType<typeof useTimeout>;

export function useDependencyTimeout(
  callback: () => void,
  options: TimeoutOptions,
  deps: DependencyList
): ReturnType<typeof useTimeout>;

Usage

typescript

import { useDependencyTimeout } from '@modern-kit/react';

const Example = () => {
  const [number, setNumber] = useState(0);
  const [boolean, setBoolean] = useState(false);

  const { set, reset, clear } = useDependencyTimeout(() => {
    setNumber(number + 1);
  }, 1000, [boolean]);
  
  /*
   * useDependencyTimeout(() => {
   *   setNumber(number + 1);
   * }, { delay: 1000, enabled: true });
   */

  return (
    <div>
      <p>{number}</p>
      <button onClick={() => setBoolean(!boolean)}>Toggle 의존성 배열 수정</button>
      <div>
        <button onClick={() => set()}>set</button>
        <button onClick={() => reset()}>reset</button>
        <button onClick={() => clear()}>clear</button>
      </div>
    </div>
  );
};

Example

0