useTimeout Hook
A custom React Hook for managing setTimeout with cleanup and re-render support (TypeScript)
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>