Solution

useTimeout(callback, delay) schedules one future call of the latest callback and returns nothing. The hook tracks two things: whether a timeout should currently exist, and which callback that timeout should invoke when it fires.

The main correctness concern is stale closures. A pending timeout should not restart just because the callback identity changes, but it still needs to run the newest callback if that change happens before the timeout fires.

• useRef stores the latest callback so the scheduled timeout can read the current function.
• Updating that ref during render keeps it fresh without adding callback as an effect dependency.
• useEffect manages the timeout lifecycle based on delay, and null disables scheduling.
• Cleanup clears the previous timeout whenever the component unmounts or the delay changes.

import { useRef, useEffect } from 'react';

/**
 * @param {() => void} callback
 * @param {number | null} delay
 */
export default function useTimeout(callback, delay) {
  // Keep the timeout pointed at the latest callback without restarting it on every render.
  const latestCallback = useRef(callback);
  latestCallback.current = callback;
  useEffect(() => {
    if (delay === null) {
      return;
    }
    const timeoutId = setTimeout(() => {
      latestCallback.current();
    }, delay);
    return () => {
      clearTimeout(timeoutId);
    };
  }, [delay]);
}

Storing the callback in a ref is what keeps the timer stable without forcing the effect to restart every time the callback function changes.

Notes

• The timeout should fire only once per scheduled run.
• If the callback changes before the timeout fires, the pending timer should call the new callback.
• Changing delay replaces the pending timeout, and unmounting clears it.