REACT

useTimeout Hook

A custom React Hook for managing setTimeout with cleanup and re-render support (TypeScript)

ReactHooksTimeoutUtilities

Code

import { useCallback, useEffect, useRef } from 'react';

function useTimeout(
  callback: () => void,
  delay: number | null
): () => void {
  const callbackRef = useRef(callback);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Update callback ref on each render
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  // Set up timeout
  useEffect(() => {
    __TOKEN_15__ (delay === null) return;

    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);

    __TOKEN_17__ () => {
      __TOKEN_18__ (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, [delay]);

  // Clear timeout manually
  const clear = useCallback(() => {
    __TOKEN_20__ (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = null;
    }
  }, []);

  return clear;
}

// Usage example
// const clearTimeout = useTimeout(() => {
//   setShowMessage(false);
// }, 3000);
// // Clear early if needed
// <button onClick={clearTimeout}>Dismiss Now</button>