React自定义useFetch Hook依赖数组扩展元素问题咨询

你想要的这种自定义Hook完全可以实现，而且我们可以解决你提到的依赖数组问题，同时让Hook更健壮。先来看你的核心需求：能传入任意异步函数和动态参数，自动管理加载和错误状态，同时避免不必要的重复请求。

你的初始代码存在的问题 #

你当前的代码里，useEffect的依赖数组用了[...params, fetchFn]，但每次调用useFetch时，params都会生成新数组，而且如果fetchFn是内联函数（比如组件里直接定义的），每次渲染都会创建新的函数实例，这会导致useEffect频繁触发，即使参数和函数逻辑根本没变化。另外，直接用布尔值存error也不够实用，没法获取具体的错误信息。

改进后的实现方案 #

我们可以用useRef追踪上一次的依赖，再加入组件卸载后的状态防护，来解决这些问题：

import { useState, useEffect, useRef } from 'react';

function useFetch(fetchFn, ...params) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null); // 改为存储错误对象，更实用

  // 用ref保存上一次的函数和参数，用于对比变化
  const prevDepsRef = useRef({ fetchFn, params });

  useEffect(() => {
    // 对比当前依赖和上一次的是否完全一致
    const isSameFetchFn = prevDepsRef.current.fetchFn === fetchFn;
    const isSameParams = JSON.stringify(prevDepsRef.current.params) === JSON.stringify(params);

    // 如果依赖没变化，直接返回，不执行请求
    if (isSameFetchFn && isSameParams) {
      return;
    }

    // 更新ref中的依赖缓存
    prevDepsRef.current = { fetchFn, params };

    // 标记组件是否挂载，防止卸载后更新状态导致内存泄漏
    let isMounted = true;
    setLoading(true);
    setError(null);

    // 执行异步请求
    fetchFn(...params)
      .then(() => {
        if (isMounted) {
          setLoading(false);
        }
      })
      .catch((err) => {
        if (isMounted) {
          setError(err);
          setLoading(false);
        }
      });

    // 清理函数：组件卸载时标记为未挂载
    return () => {
      isMounted = false;
    };
  }, [fetchFn, params]); // 这里直接传入params，内部做对比过滤无效触发

  return { loading, error };
}

关键优化点说明 #

1. 依赖对比逻辑：通过useRef保存上一次的fetchFn和params，每次渲染时对比内容是否变化，只有真正变化时才执行请求，避免了因数组/函数实例重新创建导致的无效触发。
2. 组件卸载防护：加入isMounted标记，防止组件已经卸载后还更新状态，避免React警告和内存泄漏。
3. 错误信息优化：把error从布尔值改为存储错误对象，这样你在使用时可以获取具体的错误详情（比如错误消息、状态码等）。

额外建议：优化fetchFn的稳定性 #

如果你的fetchFn是在组件内部定义的内联函数，每次渲染都会生成新的函数实例，这会导致useEffect认为依赖变化。这时候可以用useCallback包裹你的异步函数，保证它的稳定性：

// 组件内部
const fetchUser = useCallback((id) => {
  return fetch(`/api/users/${id}`).then(res => res.json());
}, []); // 空依赖数组，只创建一次

const { loading, error } = useFetch(fetchUser, userId);

这样只有当useCallback的依赖变化时，fetchUser才会重新创建，进一步减少不必要的请求触发。

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