Custom React Hook for using setTimeout
Series: Custom React Hooks
Episodes: (6/10)
- Custom React Hook for Full Screen Mode
- Custom React Hook for Queue
- Custom React Hook for Array
- Custom React Hook for Event Listening
- Custom React Hook for using setInterval
- Custom React Hook for using setTimeout
- Custom react hook for client idle detection:- useIdle
- Custom react hook for checking client internet connection:- useOnlineStatus
- Custom react hook for API call:- useAsync
- Custom React Hook for using Intersection Observer:- useIntersectionObserver
Implementation
import { useEffect, useRef } from "react";
type Args = {
callback: () => void;
delay: number;
startOnMount?: boolean;
};
/**
* A custom hook that sets a timeout for a given callback function.
*
* @param {Object} args - An object containing the following properties:
* - {Function} callback: The function to be called after the specified delay.
* - {number} delay: The delay (in milliseconds) before the callback is invoked.
* - {boolean} startOnMount: (optional) Whether the timeout should start immediately when the component mounts.
* @return {Object} An object containing the following functions:
* - {Function} set: Sets a new timeout with the given callback and delay, canceling the previous timeout if any.
* - {Function} clear: Cancels the current timeout, if any.
*/
const useTimeout = ({ callback, delay, startOnMount = false }: Args) => {
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const clear = () => {
if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
};
useEffect(() => {
if (startOnMount) timeoutRef.current = setTimeout(callback, delay);
return () => clear();
}, [delay, startOnMount, callback]);
const set = () => {
clear();
timeoutRef.current = setTimeout(callback, delay);
};
return { set, clear };
};
export default useTimeout;