Polling in React: When Smart Short-Polling Beats WebSocket Complexity

import { useEffect, useRef } from "react";

export function useSmartPolling(callback: () => Promise<void>, intervalMs = 3000, enabled = true) {
  const savedCallback = useRef(callback);
  savedCallback.current = callback;

  useEffect(() => {
    if (!enabled) return;

    let timeoutId: NodeJS.Timeout;

    const tick = async () => {
      // Pause polling if user is in another browser tab
      if (!document.hidden) {
        try {
          await savedCallback.current();
        } catch (err) {
          console.error("Polling error:", err);
        }
      }
      timeoutId = setTimeout(tick, intervalMs);
    };

    timeoutId = setTimeout(tick, intervalMs);
    return () => clearTimeout(timeoutId);
  }, [intervalMs, enabled]);
}