如何处理React严格模式下useEffect执行两次的问题？

针对你遇到的严格模式下useEffect执行两次、触发重复网络请求的问题，这里有几个实用的解决思路：

方法一：用Ref跟踪已处理的用户状态 #

利用React的useRef来记录是否已经针对当前用户执行过网络请求，因为Ref的内容不会随组件重新渲染而重置，正好可以用来避免重复操作：

import { useRef, useEffect } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth } from './firebase';

function YourComponent() {
  const [user, loading, error] = useAuthState(auth);
  const processedUserId = useRef(null);

  useEffect(() => {
    if (loading) return;
    
    if (!user) {
      processedUserId.current = null; // 登出时重置标记
      return navigate("/");
    }

    // 仅当当前用户未被处理过时执行请求
    if (processedUserId.current !== user.uid) {
      // 这里写你的网络请求逻辑
      // network stuff here

      processedUserId.current = user.uid; // 标记该用户已处理
    }
  }, [user, loading]);

  // 组件其他逻辑...
}

原理很简单：每次用户登录完成后，先检查processedUserId里存储的ID是否和当前用户ID一致，不一致才执行请求并更新标记；用户登出时重置标记，确保下次登录新用户时能正常触发请求。

方法二：让网络请求本身幂等 #

如果你的后端支持，可以把请求设计成幂等操作：

• 对于GET请求，重复执行不会改变服务器状态，只是多一次数据拉取，通常不会有问题；
• 对于POST/PUT这类会修改状态的请求，可以在后端加入重复请求校验（比如用用户ID+请求唯一标识，或者检查是否已经执行过该操作），确保重复请求不会产生副作用。

这种方案不需要修改前端逻辑，适合后端可控的场景。

方法三：结合状态管理缓存请求结果（可选） #

如果你的网络请求是为了获取用户相关数据，可以把请求逻辑封装到自定义钩子中，结合useMemo或者状态管理工具（比如Redux、Zustand）来缓存数据。这样即使useEffect执行两次，也只会实际发起一次请求，后续直接读取缓存结果。不过这种方案相对复杂，适合大型项目的状态管理场景。

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