Typescript implementation of useTimeout

useTimeout.ts

/* eslint-disable import/prefer-default-export */
/**
 * Create a setTimeout on demand
 * See: https://www.joshwcomeau.com/snippets/react-hooks/use-timeout/
 */

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

export const useTimeout = (callback: () => void, delay: number): MutableRefObject<number> => {
    const timeoutRef = useRef<number>(0); // not sure about this one 🙃
    const savedCallback = useRef<() => void>(callback);

    useEffect(() => {
        savedCallback.current = callback;
    });

    useEffect(() => {
        const tick = () => savedCallback.current();
        if (typeof delay === 'number') {
            timeoutRef.current = window.setTimeout(tick, delay);
            return () => window.clearTimeout(timeoutRef.current);
        }
    }, [delay]);

    return timeoutRef;
};