React useEffect如何判断是哪个依赖项变化触发回调执行

React默认的useEffect不会告知回调具体是哪个依赖项触发的，要实现“仅特定依赖变化时才执行对应逻辑”的需求，最稳妥的方案是配合useRef缓存上一轮的依赖值，通过新旧值对比判断触发源，全React版本通用。

具体实现代码 #

const [index, setIndex] = React.useState(3);
const [dep, setDep] = React.useState(1);
// 缓存上一次渲染的dep值
const prevDep = React.useRef(dep);

React.useEffect(() => {
  // 两个条件同时满足才执行逻辑：1. index为0；2. 本次是dep变化触发的effect
  if (index === 0 && prevDep.current !== dep) {
    setIndex(dep);
  }
  // 逻辑执行完后更新缓存值，供下一轮渲染对比
  prevDep.current = dep;
}, [index, dep]);

// 测试场景
setIndex(0); // 仅index变化，dep新旧值一致，不会执行setIndex(dep)
setDep(5);   // dep发生变化，且index已经为0，触发setIndex(5)

实现说明 #

• 不要为了区分触发源强行拆分多个useEffect：如果把dep和index的逻辑拆到独立的effect中，反而需要额外处理状态同步时序问题，当两个依赖同时变化时容易出现不符合预期的执行顺序。
• 记得在effect逻辑执行完成后再更新ref中存储的旧值，如果提前更新会导致新旧值一致，无法正确识别依赖变化。
• 该方案没有破坏useEffect的依赖规则，不需要加eslint屏蔽注释，不会出现闭包捕获旧值的问题。

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