based on: https://medium.com/@sdolidze/the-iceberg-of-react-hooks-af0b588f43fb

useTimeout.ts

import * as React from 'react';

type TFunction = (...args: any[]) => any;

/**
 * safe way to use window.setTimeout using a hook to handle it
 *
 * @param {TFunction} callback to be executed by the timeout
 * @param {number} delay time to the execution
 * @param {boolean} autorun flag that says if should start running right after call the hook - default true
 *
 * @return {[TFunction, TFunction]} start and clear functions
 */
export function useTimeout(callback: TFunction, delay: number, autorun: boolean = true): [TFunction, TFunction] {
	const savedCallback = React.useRef<TFunction>(callback);
	const timeoutRef = React.useRef<number | undefined>(undefined);

	const startTimeout = React.useCallback(() => {
		if (timeoutRef.current || !Number(delay) || delay < 0) {
			return;
		}
		const runOnTimeout = () => {
			savedCallback.current();
			timeoutRef.current = undefined;
		};
		timeoutRef.current = window.setTimeout(runOnTimeout, delay);
	}, []);

	const clearTimeout = React.useCallback(() => {
		if (!timeoutRef.current) {
			return;
		}
		window.clearTimeout(timeoutRef.current);
		timeoutRef.current = undefined;
	}, []);

	React.useEffect(() => {
		savedCallback.current = callback;
	}, [callback]);

	React.useEffect(() => {
		if (autorun) {
			clearTimeout();
			startTimeout();
		}
		return () => clearTimeout();
	}, [delay, autorun]);

	return [startTimeout, clearTimeout];
}

export default useTimeout;