React: manage window timeout custom hooks

useTimeout.ts

import { useEffect, useRef } from "react";

/**
 * manage window timeout hooks
 *
 * ex)
 *
 * const [beginTimer, clearTimer] = useTimeout(() => { ... }, ms);
 *
 * useEffect(() => {
 *   beginTimer();
 * }, [deps1]);
 *
 * useEffect(() => {
 *   clearTimer();
 * }, [deps2]);
 *
 * @export
 * @param {() => void | null} exec
 * @param {number} ms
 * @returns
 */
export default function useTimeout(
  exec: (() => void) | null,
  ms: number
): [() => void, () => void] {
  const timerId = useRef<number | null>(null);

  const clearTimer = () => {
    if (timerId.current) {
      window.clearTimeout(timerId.current);
      timerId.current = null;
    }
  };

  const beginTimer = () => {
    clearTimer();
    timerId.current = window.setTimeout(() => {
      if (exec) {
        exec();
      }
      clearTimer();
    }, ms);
  };

  useEffect(() => {
    return () => clearTimer();
  }, []);

  return [beginTimer, clearTimer];
}