useInterval — setInterval that works correctly with React state and cleanup

import { useEffect, useRef, useCallback, useState } from "react";
 
/**
 * useInterval
 * A declarative setInterval hook. Automatically cleans up on unmount.
 * Pass `null` as delay to pause.
 */
function useInterval(
  callback: () => void,
  delay: number | null
): void {
  const savedCallback = useRef(callback);
 
  // Remember the latest callback without restarting the interval
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
 
  useEffect(() => {
    if (delay === null) return;
 
    const id = setInterval(() => savedCallback.current(), delay);
    return () => clearInterval(id);
  }, [delay]);
}
 
/**
 * useCountdown
 * Countdown timer built on useInterval.
 */
interface UseCountdownOptions {
  /** Starting value in seconds */
  seconds: number;
  /** Interval in ms. Default: 1000 */
  interval?: number;
  /** Start immediately. Default: false */
  autoStart?: boolean;
  /** Called when countdown reaches zero */
  onComplete?: () => void;
}
 
interface UseCountdownReturn {
  /** Remaining seconds */
  remaining: number;
  /** Whether the countdown is running */
  isRunning: boolean;
  /** Start or resume the countdown */
  start: () => void;
  /** Pause the countdown */
  pause: () => void;
  /** Reset to the initial value and stop */
  reset: () => void;
}
 
function useCountdown(options: UseCountdownOptions): UseCountdownReturn {
  const {
    seconds,
    interval = 1000,
    autoStart = false,
    onComplete,
  } = options;
 
  const [remaining, setRemaining] = useState(seconds);
  const [isRunning, setIsRunning] = useState(autoStart);
  const onCompleteRef = useRef(onComplete);
 
  useEffect(() => {
    onCompleteRef.current = onComplete;
  }, [onComplete]);
 
  useInterval(
    () => {
      setRemaining((prev) => {
        if (prev <= 1) {
          setIsRunning(false);
          onCompleteRef.current?.();
          return 0;
        }
        return prev - 1;
      });
    },
    isRunning ? interval : null
  );
 
  const start = useCallback(() => {
    if (remaining > 0) setIsRunning(true);
  }, [remaining]);
 
  const pause = useCallback(() => setIsRunning(false), []);
 
  const reset = useCallback(() => {
    setIsRunning(false);
    setRemaining(seconds);
  }, [seconds]);
 
  return { remaining, isRunning, start, pause, reset };
}

"use client";
 
// Auto-incrementing counter
function TickCounter() {
  const [count, setCount] = useState(0);
  const [delay, setDelay] = useState<number | null>(1000);
 
  useInterval(() => {
    setCount((c) => c + 1);
  }, delay);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setDelay(delay ? null : 1000)}>
        {delay ? "Pause" : "Resume"}
      </button>
      <button onClick={() => setDelay(500)}>Speed Up (500ms)</button>
      <button onClick={() => setDelay(2000)}>Slow Down (2s)</button>
    </div>
  );
}
 
// Countdown timer
function Timer() {
  const { remaining, isRunning, start, pause, reset } = useCountdown({
    seconds: 60,
    onComplete: () => alert("Time is up!"),
  });
 
  const minutes = Math.floor(remaining / 60);
  const secs = remaining % 60;
 
  return (
    <div>
      <p style={{ fontSize: 48, fontFamily: "monospace" }}>
        {String(minutes).padStart(2, "0")}:{String(secs).padStart(2, "0")}
      </p>
      <div style={{ display: "flex", gap: 8 }}>
        {!isRunning ? (
          <button onClick={start}>Start</button>
        ) : (
          <button onClick={pause}>Pause</button>
        )}
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  );
}
 
// API polling
function PollingStatus() {
  const [status, setStatus] = useState("unknown");
  const [polling, setPolling] = useState(true);
 
  useInterval(
    async () => {
      try {
        const res = await fetch("/api/status");
        const data = await res.json();
        setStatus(data.status);
        if (data.status === "complete") {
          setPolling(false); // Stop polling when done
        }
      } catch {
        setStatus("error");
      }
    },
    polling ? 5000 : null
  );
 
  return (
    <div>
      <p>Status: {status}</p>
      <p>{polling ? "Polling every 5s..." : "Polling stopped"}</p>
    </div>
  );
}

function useTimeout(callback: () => void, delay: number | null): void {
  const savedCallback = useRef(callback);
 
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
 
  useEffect(() => {
    if (delay === null) return;
    const id = setTimeout(() => savedCallback.current(), delay);
    return () => clearTimeout(id);
  }, [delay]);
}

const startRef = useRef(Date.now());
useInterval(() => {
  const elapsed = Math.floor((Date.now() - startRef.current) / 1000);
  setRemaining(Math.max(0, totalSeconds - elapsed));
}, 100); // Check frequently, calculate from wall clock