React Hooks中如何避免useEffect内多次触发API调用？

数据老陈

2026-8-2

解决React Hooks中API重复调用的问题

问题原因

当前代码中，空依赖的初始化useEffect会在组件挂载时执行，它不仅设置了activePage状态，还调用setCount(count + 1)触发状态更新，进而触发依赖count的第二个useEffect执行。再加上firstRef.current的初始控制逻辑，最终导致API被调用两次。

优化方案

方案1：合并逻辑，直接控制API调用时机

去掉冗余的count状态，将URL参数解析与API调用逻辑合并，通过ref精准控制首次调用：

const firstRef = useRef(true);

useEffect(() => {
  // 解析URL参数并设置页码
  let targetPage = 1;
  if (isInteger(searchParams.get("pageNo"))) {
    targetPage = parseInt(searchParams.get("pageNo"));
  }
  setState(prev => ({ ...prev, activePage: targetPage }));

  // 仅首次加载时调用一次API
  if (firstRef.current) {
    videoGridState();
    firstRef.current = false;
  }
}, []);

方案2：保留防抖逻辑，调整依赖关系

如果需要保留非首次操作的防抖延迟，可以将API触发的依赖从count改为activePage，避免不必要的状态更新：

const firstRef = useRef(true);

useEffect(() => {
  // 解析URL参数并设置页码
  let targetPage = 1;
  if (isInteger(searchParams.get("pageNo"))) {
    targetPage = parseInt(searchParams.get("pageNo"));
  }
  setState(prev => ({ ...prev, activePage: targetPage }));
}, []);

useEffect(() => {
  if (firstRef.current) {
    videoGridState();
    firstRef.current = false;
  } else {
    const timer = setTimeout(() => {
      videoGridState(false);
    }, 1000);
    return () => clearTimeout(timer);
  }
}, [activePage]); // 依赖activePage而非count