自定义Hook usePolling问题咨询：重复执行与实例状态隔离

问题1：自定义Hook反复执行的原因及解决 #

你的usePolling反复执行核心是useEffect依赖数组不完整，同时状态更新逻辑存在异步导致的清理失效问题：

• 你在useEffect内部用到了instanceTimeoutId、callback，但这些都没加入依赖数组，React会因为隐式依赖变化触发useEffect重复执行。
• 用useState保存timeoutId时，状态更新是异步的，清理函数里拿到的可能是旧的timeoutId，无法正确清除最新的定时器。
• 代码中delay(interval)的interval未定义，需要作为参数传入usePolling。

修正方案：

1. 用useRef替代useState保存timeoutId，确保能获取到最新的定时器ID，避免异步更新导致的清理失效。
2. 补全useEffect的依赖数组，包含callback、interval以及传入的所有依赖项。
3. 将轮询间隔interval作为可配置参数传入Hook，提升灵活性。

问题2：自定义Hook实例状态隔离的正确性 #

你用useState维护每个实例的timeoutId思路是对的——自定义Hook的每一次调用都会创建独立的状态上下文，不同组件或同一组件多次调用usePolling时，各自的状态都是完全隔离的，不会互相干扰。不过用useRef保存定时器ID会更适合，因为定时器ID不需要触发组件重渲染，useRef的更新不会导致重渲染，性能更好。

修正后的完整代码 #

// 实现delay工具函数，返回定时器ID和延迟Promise
const delay = (ms) => {
  let timeoutId;
  const promise = new Promise(resolve => {
    timeoutId = setTimeout(resolve, ms);
  });
  return { timeoutId, promise };
};

export const StatusIndicator = () => {
  const isAuthenticated = useSelector((state) => state.auth.token);
  // RTK Query的useGetStatusQuery返回的refetch函数
  const { data, refetch: q } = useGetStatusQuery();

  // 调用usePolling，传入回调、轮询间隔（比如5000ms）和依赖
  usePolling({ callback: q, interval: 5000 }, [isAuthenticated]);

  return (<div>{data?.status}</div>);
};

export const usePolling = ({ callback, interval }, dependencies = []) => {
  // 用useRef保存最新的定时器ID，避免异步更新问题
  const timeoutIdRef = useRef(null);

  useEffect(() => {
    // 定义轮询函数
    async function poll() {
      // 先清除之前的定时器
      if (timeoutIdRef.current) {
        clearTimeout(timeoutIdRef.current);
      }
      
      try {
        // 执行回调（RTK Query的refetch）
        await callback();
      } catch (err) {
        // 处理请求失败的情况，比如打印错误
        console.error('轮询请求失败:', err);
      }

      // 设置下一次轮询
      const { timeoutId, promise } = delay(interval);
      timeoutIdRef.current = timeoutId;
      await promise;
      // 递归调用继续轮询
      poll();
    }

    // 只有当用户已认证时才启动轮询
    if (isAuthenticated) {
      poll();
    }

    // 清理函数：组件卸载或依赖变化时清除定时器
    return () => {
      if (timeoutIdRef.current) {
        clearTimeout(timeoutIdRef.current);
      }
    };
  }, [callback, interval, ...dependencies]); // 补全所有依赖
};

额外优化点 #

• 添加了错误捕获，避免轮询过程中请求失败导致整个轮询中断。
• 增加了isAuthenticated判断，只有用户认证后才启动轮询，符合业务逻辑。
• 将RTK Query的q明确命名为refetch，代码可读性更强。

内容的提问来源于stack exchange，提问作者Ben Aston