useScheduledEffect #react #hook

useScheduledEffect.tsx

import { useEffect, useRef } from "react";

type TimeoutCallback = (timestamp: number) => void;

export function useScheduledEffect(
  callback: TimeoutCallback,
  timestamp: number | null,
) {
  const savedCallback = useRef<TimeoutCallback | null>(callback);

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    if (timestamp == null) {
      return;
    }

    const timeout = Math.max(0, timestamp - Date.now());
    const id = setTimeout(() => {
      if (savedCallback.current != null) {
        savedCallback.current(Date.now());
      }
    }, timeout);

    return () => clearTimeout(id);
  }, [timestamp]);
}