React中依赖未变更时，如何阻止useEffect重复执行？

核心问题分析 #

首先明确：正常情况下，当依赖数组中的值未发生引用/值变更时，useEffect不会重复执行。如果出现异常重复执行，先排查两个关键点：

• 是否是引用类型依赖（对象、数组）看起来内容相同，但每次组件重渲染时生成了新的引用（比如父组件直接传{}或[]作为props）；
• 是否在开发环境的Strict Mode下运行（React会强制双重执行副作用，用于检测潜在问题）。

阻止重复执行的最佳实践 #

1. 用useRef追踪执行状态（替代组件外全局变量） #

组件外部定义的变量是全局共享的，多组件实例会互相干扰，而useRef每个组件实例独立，且不会触发重渲染，是更安全的方案：

const MyComponent: React.FC<ContainerProps> = (props) => {
  const hasExecuted = useRef(false);
  const { dependencyThatDoesNotChange } = props;

  useEffect(() => {
    if (!hasExecuted.current && dependencyThatDoesNotChange === 'value') {
      hasExecuted.current = true;
      // 执行你的业务逻辑
    }
  }, [dependencyThatDoesNotChange]);

  return <div>...</div>;
};

2. 确保依赖引用稳定（针对引用类型依赖） #

如果依赖是对象/数组，每次组件重渲染时若生成新引用，React会判定依赖变更。此时需要在父组件用useMemo缓存依赖，或在子组件内做值对比：

// 父组件缓存引用类型依赖
const ParentComponent = () => {
  const stableDependency = useMemo(() => ({ key: 'value' }), []);
  return <MyComponent dependencyThatDoesNotChange={stableDependency} />;
};

// 子组件内做浅对比（仅当无法在父组件缓存时使用）
const MyComponent: React.FC<ContainerProps> = (props) => {
  const prevDependency = useRef(props.dependencyThatDoesNotChange);

  useEffect(() => {
    // 浅对比判断依赖是否真的变化
    if (prevDependency.current !== props.dependencyThatDoesNotChange) {
      prevDependency.current = props.dependencyThatDoesNotChange;
      // 依赖变更时执行逻辑
    }
  }, [props.dependencyThatDoesNotChange]);
};

3. 严格遵循依赖数组规范 #

你的理解完全正确：React文档明确不推荐省略useEffect中引用的依赖，这会导致闭包陷阱（引用过时的变量值）。如果觉得必须省略依赖，说明逻辑设计有优化空间，比如：

• 将依赖用useRef缓存，在effect中通过.current访问；
• 拆分组件，把副作用逻辑移到只依赖特定值的子组件中。

关于Strict Mode的影响 #

是的，开发环境下Strict Mode会强制双重执行useEffect（以及useState初始化、useReducer等），目的是检测未清理的副作用（比如未取消的订阅、定时器）。这种重复执行仅存在于开发环境，生产环境会恢复正常的单次执行，无需额外处理。

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