useRandomInterval

use-random-interval.ts

import { useCallback, useEffect, useRef } from "react";

const random = (min: number, max: number) =>
	Math.floor(Math.random() * (max - min)) + min;

/**
 * https://www.joshwcomeau.com/snippets/react-hooks/use-random-interval/
 */
type UseRandomIntervalOptions = {
	callback: () => void | Promise<void>;
	enabled?: boolean;
	minDelay: number;
	maxDelay: number;
};
export function useRandomInterval({
	callback,
	enabled = true,
	minDelay,
	maxDelay,
}: UseRandomIntervalOptions) {
	const timeoutId = useRef<number | undefined>();
	const savedCallback = useRef(callback);
	useEffect(() => {
		savedCallback.current = callback;
	}, [callback]);
	useEffect(() => {
		if (enabled) {
			const handleTick = () => {
				const nextTickAt = random(minDelay, maxDelay);
				timeoutId.current = window.setTimeout(() => {
					void savedCallback.current();
					handleTick();
				}, nextTickAt);
			};
			handleTick();
		}
		return () => window.clearTimeout(timeoutId.current);
	}, [minDelay, maxDelay, enabled]);
	const cancel = useCallback(() => {
		window.clearTimeout(timeoutId.current);
	}, []);
	return cancel;
}