如何避免依赖值相同但对象引用变化时useEffect重复执行？

针对你遇到的问题，这里有几个实用的解决方案，既能兼容用户的写法，又能避免不必要的effect执行和异步中断：

1. 自定义effect内的比较逻辑，跳过无效执行 #

核心思路是用useRef保存上一次的配置对象，在effect执行前先做深比较，只有当配置实际值发生变化时才继续执行业务逻辑，否则直接return，不触发后续操作和清理函数。

示例代码：

import { useEffect, useRef } from 'react';
import isEqual from 'lodash.isEqual';

function useYourCustomHook(config) {
  const prevConfigRef = useRef(config);

  useEffect(() => {
    // 先判断配置值是否真的变化，没变化直接跳过
    if (isEqual(prevConfigRef.current, config)) {
      return;
    }
    // 更新缓存的配置
    prevConfigRef.current = config;

    // 标记异步操作是否已取消
    let operationCancelled = false;

    async function handleBusinessLogic() {
      if (operationCancelled) return;
      // 这里写你的异步请求或其他业务逻辑
      console.log('执行业务逻辑，配置:', config);
    }

    handleBusinessLogic();

    // 只有当配置真的变化时，才会触发这个清理函数
    return () => {
      operationCancelled = true;
      // 这里写真正需要的清理逻辑（比如取消请求、清除定时器）
    };
  }, [config]); // 依赖数组仍保留config，但内部做过滤
}

这种方式既保留了React的依赖追踪机制，又通过手动比较规避了引用变化但值不变的问题，不会触发不必要的清理操作。

2. 将配置对象拆分为独立的基础类型参数 #

如果你的hook配置项不多，可以考虑把对象拆成多个单独的基础类型参数（字符串、数字、布尔值等）。React对基础类型的依赖比较是按值进行的，不需要处理引用问题，用户也不用手动useMemo。

示例改造：

// 用户原来的调用：useYourCustomHook({ apiUrl: '/data', timeout: 3000 })
// 改造后调用：useYourCustomHook('/data', 3000)

function useYourCustomHook(apiUrl, timeout) {
  useEffect(() => {
    async function fetchData() {
      // 业务逻辑，直接使用apiUrl和timeout
    }
    fetchData();

    return () => {
      // 清理逻辑
    };
  }, [apiUrl, timeout]); // 基础类型依赖，自动按值比较
}

这种方案对用户最友好，但如果配置项过多，会导致hook参数列表过长，需要根据实际情况权衡。

3. 在hook内部自动缓存配置对象 #

可以在hook内部帮用户处理配置对象的缓存，用useMemo结合深比较，让用户传入的新引用对象被内部统一为稳定的引用，这样effect只会在配置值变化时触发。

示例代码：

import { useEffect, useMemo, useRef } from 'react';
import isEqual from 'lodash.isEqual';

function useYourCustomHook(config) {
  const prevConfigRef = useRef();
  // 内部缓存配置，只有值变化时才更新引用
  const memoizedConfig = useMemo(() => {
    if (!isEqual(prevConfigRef.current, config)) {
      prevConfigRef.current = config;
    }
    return prevConfigRef.current;
  }, [config]);

  useEffect(() => {
    async function handleLogic() {
      // 使用memoizedConfig，确保引用稳定
      console.log('执行逻辑，配置:', memoizedConfig);
    }
    handleLogic();

    return () => {
      // 清理逻辑
    };
  }, [memoizedConfig]); // 依赖缓存后的配置对象
}

这种方式对用户完全透明，用户不需要做任何额外处理，hook内部自动处理了引用问题。

额外注意事项 #

• 深比较性能：如果配置对象非常大，lodash.isEqual的开销可能会增加，这时可以考虑让用户传入自定义的比较函数，或者只比较配置中的关键字段（比如只比较apiUrl、timeout这些影响业务逻辑的字段），而非整个对象。
• 异步操作安全：无论哪种方案，都要确保在清理函数中正确标记异步操作取消，避免内存泄漏或无效的状态更新。

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