React中依赖存在关联时，如何避免useEffect被多次调用？

问题背景 #

我们有一个React函数式组件，包含状态a、b和本地函数fn，要求a或b变化时调用fn：

import { useState, useEffect } from 'react';

function MyComponent() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  function fn() { console.log(a, b); }

  // 监听a、b变化调用fn
  useEffect(()=> { 
    fn();
  }, [a, b]);

  // 按钮更新a、b
  return (
    <>
      <button onClick={()=> setA(a => a + 1)}>Increment A: {a}</button>
      <button onClick={()=> setB(b => b + 1)}>Increment B: {b}</button>
    </>
  );
}

额外需求：当a变化时（无论是本地状态更新，还是作为外部props传入变化），需要同步更新b（比如递增或重置为0）：

// 当a变化时更新b
useEffect(()=> {
  setB(b => b + 1); // 或 setB(0)，根据业务需求调整
}, [a]);

此时点击"Increment A"按钮，会触发两次fn执行：第一次是a更新后，第二次是b更新后。同时组件会发生两次渲染，我们需要让fn仅执行一次，并尽可能合并渲染流程。

解决方案 #

方案1：合并状态更新（仅适用于a为本地状态的场景） #

如果a是组件内部状态，不需要通过useEffect间接更新b，可以在触发a更新的同时直接更新b，React会自动批量处理这两个状态更新，只触发一次渲染和一次fn执行：

<button onClick={()=> {
  setA(a => a + 1);
  setB(b => b + 1); // 或 setB(0)，按需调整
}}>Increment A: {a}</button>

这种方式最简单直接，完全避免了连锁的useEffect触发。

方案2：用useReducer统一状态管理（通用场景，支持a为props） #

当a是外部传入的props时，无法在点击事件中合并更新，这时可以用useReducer将状态更新逻辑集中，确保a变化时b的更新和最终状态的确认在同一流程完成，从而只触发一次渲染和fn执行。

首先定义reducer函数，集中处理所有状态更新逻辑：

function stateReducer(state, action) {
  switch(action.type) {
    case 'SYNC_WITH_A': {
      const newA = action.payload;
      // 根据需求更新b：这里示例为递增，可替换为0或其他逻辑
      const newB = state.b + 1;
      return { ...state, a: newA, b: newB };
    }
    case 'INCREMENT_B': {
      return { ...state, b: state.b + 1 };
    }
    default:
      return state;
  }
}

然后在组件中使用useReducer，并监听props的a变化触发状态同步：

import { useReducer, useEffect } from 'react';

function MyComponent({ a: propA }) {
  // 初始化状态，将props.a作为初始值
  const [state, dispatch] = useReducer(stateReducer, { 
    a: propA, 
    b: 0 
  });
  const { a, b } = state;

  function fn() { console.log(a, b); }

  // 监听外部props.a变化，同步更新内部状态
  useEffect(() => {
    dispatch({ type: 'SYNC_WITH_A', payload: propA });
  }, [propA]);

  // 仅在最终状态更新完成后调用fn
  useEffect(() => {
    fn();
  }, [a, b]);

  return (
    <>
      <button onClick={()=> dispatch({ 
        type: 'SYNC_WITH_A', 
        payload: a + 1 
      })}>Increment A: {a}</button>
      <button onClick={()=> dispatch({ type: 'INCREMENT_B' })}>Increment B: {b}</button>
    </>
  );
}

通过useReducer，a的变化会直接触发包含b更新的状态变更，整个过程只产生一次状态快照，因此只会触发一次渲染和fn执行。

方案3：用useRef标记批量更新（临时hack方案） #

如果不想重构状态管理方式，可以用useRef标记当前是否处于a引发的b更新流程中，避免fn重复执行：

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

function MyComponent({ a: propA }) {
  const [a, setA] = useState(propA);
  const [b, setB] = useState(0);
  const isBatchUpdate = useRef(false);

  function fn() { console.log(a, b); }

  // 监听外部props.a变化，更新本地a
  useEffect(() => {
    setA(propA);
  }, [propA]);

  // 当a变化时，标记为批量更新并更新b
  useEffect(()=> {
    isBatchUpdate.current = true;
    setB(b => b + 1); // 或 setB(0)
  }, [a]);

  // 监听a、b变化，仅在非批量更新时执行fn，批量更新时重置标记并执行一次
  useEffect(() => {
    if (isBatchUpdate.current) {
      isBatchUpdate.current = false;
      fn();
      return;
    }
    fn();
  }, [a, b]);

  return (
    <>
      <button onClick={()=> setA(a => a + 1)}>Increment A: {a}</button>
      <button onClick={()=> setB(b => b + 1)}>Increment B: {b}</button>
    </>
  );
}

这个方案通过标记位跳过中间状态的fn执行，只在批量更新完成后执行一次，但属于临时 workaround，长期来看推荐使用useReducer方案。

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