如何定位触发React.useMemo重新计算的依赖参数？

以下是两种可直接落地的排查方法：

方法1：通用调试Hook（可复用，适合长期调试场景） #

就是你补充中提到的封装思路，利用useMemo仅在依赖变化时执行回调的特性，每次对应值变化就会打印对应变量名，多依赖场景下排查效率很高。

封装代码 #

export function useChanged(name, value) {
  React.useMemo(() => {
    console.log('依赖发生变化', name, '新值：', value)
  }, [value])
}

组件内使用方式 #

function MyComponent(params){
  const a = calc_a(params)
  const b = calc_b(params) // 注意你原代码此处笔误写了两个a变量，需修正
  // 新增两行监控代码即可
  useChanged('a', a)
  useChanged('b', b)
  const c = React.useMemo(() => calc_c({a,b}), [a,b])
}

打开控制台就能直接看到是哪个变量变化触发了calc_c调用。

方法2：临时手动比对（无需额外封装，适合快速排查） #

如果只是临时排查不想新增自定义Hook，可以直接在useMemo回调内加依赖比对逻辑，用ref存储上一次的依赖值：

function MyComponent(params){
  const a = calc_a(params)
  const b = calc_b(params)
  // 存储上一次的依赖值
  const prevDepsRef = React.useRef({a, b})

  const c = React.useMemo(() => {
    // 执行计算前先比对变化
    const prev = prevDepsRef.current
    if (prev.a !== a) console.log('a变化', '旧值：', prev.a, '新值：', a)
    if (prev.b !== b) console.log('b变化', '旧值：', prev.b, '新值：', b)
    // 更新ref为最新值
    prevDepsRef.current = {a, b}
    return calc_c({a,b})
  }, [a,b])
}

注意事项 #

React Hooks的依赖比对是浅比较，如果a、b是对象/数组类型，就算内容没有变化，引用发生变更也会触发重计算，调试时可以同时打印新旧值确认是值变更还是引用变更。调试完成后记得删除相关调试代码，避免带到生产环境。

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