A React+Typescript hook for setTimeout requests. Includes pause, restart, resume, start, stop, and current state.

timeout.ts

/**
  This code is licensed under the terms of the MIT license
*/

import { useCallback, useEffect, useRef, useState } from "react";
export const useTimeout = (
  callback: Function,
  delay: number /** milliseconds */
) => {
  const timeoutRef = useRef(null);
  const [startTime, setStartTime] = useState<number>();
  const [remainingTime, setRemainingTime] = useState<number>(delay);
  const [state, setState] = useState<"idle" | "paused" | "running" | "ended">(
    "idle"
  );
  useEffect(() => {
    console.log("useTimeout", { state });
  }, [state]);
  const pause = useCallback(() => {
    setRemainingTime(Date.now() - startTime);
    setState("paused");
    window.clearTimeout(timeoutRef.current);
  }, [callback, delay]);
  const resume = useCallback(() => {
    if (remainingTime <= 0) {
      throw new Error("No more time remaining");
    }
    setStartTime(Date.now());
    setState("running");
    timeoutRef.current = window.setTimeout(callback, remainingTime);
  }, [callback, delay]);
  const start = useCallback(() => {
    if (remainingTime <= 0) {
      throw new Error("No more time remaining");
    }
    setState("running");
    setStartTime(Date.now());
    timeoutRef.current = window.setTimeout(callback, delay);
  }, [callback, delay]);
  const restart = useCallback(() => {
    setRemainingTime(delay);
    setStartTime(Date.now());
    setState("running");
    timeoutRef.current = window.setTimeout(callback, delay);
  }, [callback, delay]);
  const stop = useCallback(() => {
    setRemainingTime(0);
    setStartTime(null);
    setState("ended");
    window.clearTimeout(timeoutRef.current);
  }, [callback, delay]);
  return {
    pause,
    restart,
    resume,
    start,
    state,
    stop,
  };
};