counter

usecounter.tsx

import { useState, useRef, useEffect, useCallback } from 'react';
interface CountdownOptions {
  onComplete: () => void;
  onTick?: () => void;
  interval: number | null;
}

export function useCountdown(endTime: number, options: CountdownOptions) {
  const [count, setCount] = useState<number | null>(null);
  const intervalIdRef = useRef<number | null>(null);

  const handleClearInterval = useCallback(() => {
    window.clearInterval(intervalIdRef.current!);
  }, []);

  const onTick = useCallback(() => {
    if (count === 0) {
      handleClearInterval();
      options.onComplete();
    } else if (typeof count === 'number') {
      setCount(count - 1);
      options?.onTick?.();
    }
  }, [count, handleClearInterval, options]);

  useEffect(() => {
    intervalIdRef.current = window.setInterval(() => {
      onTick();
    }, options.interval!);

    return () => handleClearInterval();
  }, [onTick, options.interval, handleClearInterval]);

  useEffect(() => {
    setCount(Math.round((endTime - Date.now()) / options.interval!));
  }, [endTime, options.interval]);

  return count;
}