如何解决React useEffect缺失依赖导致的无限重渲染问题

这个无限重渲染问题确实和useContext的运行机制直接相关：

• 每次AppProvider重渲染时，组件内部直接定义的fetchJobs都会被重新创建，生成一个全新的函数引用
• 之前尝试useCallback不生效，基本是两个原因：要么没有把包裹后的函数传入Context，要么给useCallback配置了错误的依赖项
• 若直接把未做处理的fetchJobs加入Dashboard的useEffect依赖数组，会触发循环：首次渲染执行fetchJobs -> dispatch更新全局state -> AppProvider重渲染 -> 生成新的fetchJobs引用 -> 触发Dashboard的useEffect再次执行 -> 再次调用fetchJobs，形成死循环
• 若直接移除useEffect的依赖数组，等价于每次组件渲染都执行effect，同样会触发死循环

不需要写eslint禁用注释，在Context层做函数引用稳定化处理即可，完全符合React hooks的依赖校验规则：

1. 首先修改appContext.js，用useCallback包裹fetchJobs，保证函数引用稳定

// 记得从react导入useCallback
import { useReducer, useContext, useCallback } from 'react';

export const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const fetchJobs = useCallback(async () => {
    try {
      const { data } = await API.get(`/jobs`);
      dispatch({ type: FETCH_JOBS_SUCCESS, payload: data.jobs });
    } catch (err) {
      console.log(err);
    }
  }, []);
  // 这里依赖数组留空是安全的：dispatch是useReducer返回的稳定引用，全生命周期不会变化；API是外部导入的静态模块，引用也不会变化，因此useCallback返回的fetchJobs引用永远不会改变

  // 其他需要跨组件在effect中调用的方法（login、logout等），也建议用同样方式包裹
  const login = useCallback(/* 原有login逻辑 */, []);
  const logout = useCallback(/* 原有logout逻辑 */, []);

  return (
    <AppContext.Provider
      value={{
        ...state,
        login,
        logout,
        fetchJobs
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

2. 修改Dashboard组件的useEffect，将fetchJobs加入依赖数组

const Dashboard = () => {
  const { user, logout, fetchJobs } = useGlobalContext();

  useEffect(() => {
    fetchJobs();
  }, [fetchJobs]);
  // 此时fetchJobs引用永久稳定，effect只会在组件首次挂载时执行一次，完全符合ESLint的依赖校验要求

  return (
    // 原有组件渲染内容
  );
};

• 错误地在Dashboard组件内用useCallback包裹从Context取到的fetchJobs：函数源头的引用每次都在变，外层包裹无法解决引用变化问题
• 给useCallback传入了会频繁更新的依赖项，比如把全局state中的可变值加入依赖数组，导致每次state更新时useCallback依然会返回新的函数引用，无法避免循环渲染

官方说明：React保证useReducer返回的dispatch、useState返回的setter函数引用在组件全生命周期稳定，这类值加入useCallback、useEffect的依赖数组时，不会触发额外的重执行，可以安全使用。

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