React useEffect无限循环问题排查与解决方案咨询

一、无限循环的原因 #

你猜的没错，核心就是原始类型与引用类型的比较差异，再加上Context Provider的value对象每次渲染都会重建，共同导致了无限循环：

1. 当调用setLoggedInUser(userData.data.user)时，userData.data.user是一个新的引用类型对象（每次fetch返回的都是新对象），setLoggedInUser会触发AuthContextProvider重新渲染。
2. 每次AuthContextProvider渲染时，都会创建一个全新的value对象（就是传给Context.Provider的那个{login, getAuth, ...}），因为对象是引用类型，React会判定Context的值发生了变化。
3. 组件中如果useEffect的依赖数组包含authContext，Context值变化会触发useEffect重新执行，再次调用getAuth()，进而再次触发setLoggedInUser，形成循环。
4. 而赋值字符串（比如username）时，因为字符串是原始类型，React会做值比较：如果两次username内容相同，setLoggedInUser不会触发Provider重新渲染，自然也就不会触发循环。

二、修复方案 #

1. 稳定Context中的函数引用 #

用useCallback包裹getAuthUser函数，避免每次Provider渲染都创建新的函数实例：

import React, { ReactNode, useState, useCallback, useMemo } from 'react';

// ... 其他代码不变

const AuthContextProvider = (props: AuthContextProviderProps) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>('');
  const [loggedInUser, setLoggedInUser] = useState(null);

  const getAuthUser = useCallback(async () => {
    setLoading(true); // 补充设置loading为true，避免状态不一致
    try {
      const response = await fetch('/api/v1/users/getuser');

      if (response.status === 500) {
        setError('Server Error! Please try again soon...');
        return;
      }

      const userData = await response.json();
      console.log(userData)

      if (userData.message) {
        setError(userData.message);
      } else {
        setLoggedInUser(userData.data.user);
      }
    } catch (err) {
      setError('Request failed!');
    } finally {
      setLoading(false);
    }
  }, []); // 若后续fetch的url等为变量，需添加到依赖数组

  // loginHandler同理建议用useCallback包裹
  const loginHandler = useCallback((credentials: LoginCredentials) => {
    // 你的登录逻辑
  }, []);

// ... 后续代码

2. 用useMemo缓存Context的value对象 #

让value对象只有在依赖项变化时才重建，避免不必要的Context更新：

const contextValue = useMemo(() => ({
    login: loginHandler,
    getAuth: getAuthUser,
    loading,
    error,
    loggedInUser,
  }), [loginHandler, getAuthUser, loading, error, loggedInUser]);

  return (
    <AuthContext.Provider value={contextValue}>
      {props.children}
    </AuthContext.Provider>
  );
};

3. 修正组件中useEffect的依赖数组 #

现在getAuth的引用稳定了，组件中的useEffect可以安全添加正确依赖，消除警告：

useEffect(() => {
  authContext.getAuth();
}, [authContext.getAuth]);

三、关于依赖数组为空的警告 #

这个警告本身无害，但它是React在提醒你：可能存在闭包过时的问题。比如如果authContext.getAuth的逻辑后续发生变化，空依赖数组的useEffect不会重新执行，会一直使用旧的函数引用，导致逻辑不符合预期。

如果你确定只需要在组件挂载时执行一次getAuth，可以手动忽略警告：

useEffect(() => {
  authContext.getAuth();
}, []); // eslint-disable-next-line react-hooks/exhaustive-deps

但更推荐前面的修复方案，让依赖数组保持正确，既消除警告，又避免潜在的闭包问题。

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