A normal setTimeout with automatic cleanup on unmount

useSafeTimeout.ts

import { useCallback, useEffect, useRef } from "react"

/**
 * A normal setTimeout with automatic cleanup on unmount
 */
export const useSafeTimeout = () => {
  const timeout = useRef<NodeJS.Timeout | null>(null)

  const setSafeTimeout = useCallback((callback: () => void, ms: number) => {
    timeout.current = setTimeout(callback, ms)
  }, [])

  useEffect(() => {
    return () => {
      if (timeout.current) clearTimeout(timeout.current)
    }
  }, [])

  return setSafeTimeout
}