React useInterval

useInterval.tsx

import { useEffect, useRef } from "react";

export interface useIntervalProps {
    callback: () => void;

    intervalMs: number;

    /**
     * Option to have an initial call to the callback immediately once the hook is created and
     * then at each interval. When not defined or false, the first callback call is delayed until
     * the interval has passed.
     **/
    immediate?: boolean;
}

/**
 * Original code https://overreacted.io/making-setinterval-declarative-with-react-hooks/#extracting-a-hook
 * Modified to handle options and to be in TypeScript
 **/
export function useInterval(props: useIntervalProps): void {
    const savedCallback = useRef<() => void>();

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

    useEffect(() => {
        if (props.immediate) {
            savedCallback?.current?.();
        }
    }, [props.immediate]);

    useEffect(() => {
        function tick() {
            savedCallback?.current?.();
        }

        const id = window.setInterval(tick, props.intervalMs);
        return () => window.clearInterval(id);
    }, [props.intervalMs]);
}