useInterval — setInterval que funciona correctamente con el estado de React y limpieza

import { useEffect, useRef, useCallback, useState } from "react";
 
/**
 * useInterval
 * Un hook setInterval declarativo. Limpia automáticamente al desmontar.
 * Pasa `null` como delay para pausar.
 */
function useInterval(
  callback: () => void,
  delay: number | null
): void {
  const savedCallback = useRef(callback);
 
  // Recuerda el callback más reciente sin reiniciar el intervalo
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
 
  useEffect(() => {
    if (delay === null) return;
 
    const id = setInterval(() => savedCallback.current(), delay);
    return () => clearInterval(id);
  }, [delay]);
}
 
/**
 * useCountdown
 * Temporizador de cuenta regresiva construido sobre useInterval.
 */
interface UseCountdownOptions {
  /** Valor inicial en segundos */
  seconds: number;
  /** Intervalo en ms. Predeterminado: 1000 */
  interval?: number;
  /** Comenzar inmediatamente. Predeterminado: false */
  autoStart?: boolean;
  /** Llamado cuando la cuenta regresiva llega a cero */
  onComplete?: () => void;
}
 
interface UseCountdownReturn {
  /** Segundos restantes */
  remaining: number;
  /** Si la cuenta regresiva está en ejecución */
  isRunning: boolean;
  /** Inicia o reanuda la cuenta regresiva */
  start: () => void;
  /** Pausa la cuenta regresiva */
  pause: () => void;
  /** Reinicia al valor inicial y detiene */
  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";
 
// Contador incrementado automáticamente
function TickCounter() {
  const [count, setCount] = useState(0);
  const [delay, setDelay] = useState<number | null>(1000);
 
  useInterval(() => {
    setCount((c) => c + 1);
  }, delay);
 
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setDelay(delay ? null : 1000)}>
        {delay ? "Pausar" : "Reanudar"}
      </button>
      <button onClick={() => setDelay(500)}>Acelerar (500ms)</button>
      <button onClick={() => setDelay(2000)}>Desacelerar (2s)</button>
    </div>
  );
}
 
// Temporizador de cuenta regresiva
function Timer() {
  const { remaining, isRunning, start, pause, reset } = useCountdown({
    seconds: 60,
    onComplete: () => alert("¡Se acabó el tiempo!"),
  });
 
  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}>Iniciar</button>
        ) : (
          <button onClick={pause}>Pausar</button>
        )}
        <button onClick={reset}>Reiniciar</button>
      </div>
    </div>
  );
}
 
// Polling de API
function PollingStatus() {
  const [status, setStatus] = useState("desconocido");
  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); // Detener polling cuando está listo
        }
      } catch {
        setStatus("error");
      }
    },
    polling ? 5000 : null
  );
 
  return (
    <div>
      <p>Estado: {status}</p>
      <p>{polling ? "Haciendo polling cada 5s..." : "Polling detenido"}</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); // Verificar frecuentemente, calcular desde el reloj de pared