React hook for polling any given callback.

usePolling.ts

import { useEffect, useRef } from 'react';

const defaultInterval = 30e3;

export function usePolling(callback: () => Promise<void>, dependencies: any[] = [], interval: number = defaultInterval) {
  const savedCallback = useRef<() => Promise<void>>();
  const intervalId = useRef<NodeJS.Timeout | null>(null);

  // Store the latest callback in a ref to avoid recreating the effect on every render
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // The polling effect
  useEffect(() => {
    let isCancelled = false;

    const tick = async () => {
      if (!isCancelled && savedCallback.current) {
        await savedCallback.current();
        if (!isCancelled) {
          intervalId.current = setTimeout(tick, interval);
        }
      }
    };

    // Start polling immediately and also when dependencies change
    tick();

    // Cleanup function to stop polling
    return () => {
      isCancelled = true;
      if (intervalId.current) {
        clearTimeout(intervalId.current);
      }
    };
  }, [...dependencies, interval]); // Include dependencies to trigger re-run, and the interval as the last one
}