React useMemo依赖为undefined时频繁触发的原因排查

核心原因分析 #

• React严格模式的开发环境特性：React 18及以后的严格模式中，开发环境会刻意重复执行两次渲染流程，包括useMemo的回调函数。这是为了检测代码中的不纯逻辑（比如在回调里修改全局状态、执行副作用），并非bug。此时即使依赖是稳定的undefined，也会看到两次日志打印，生产环境打包后该行为会消失。
• 组件本身频繁重复渲染：如果组件因为父组件重渲染、自身state变化等原因频繁渲染，且你误解了useMemo的执行时机——useMemo在首次渲染时一定会执行一次，之后只有依赖变化才会重新计算。但如果组件多次渲染但依赖未变，正常情况下不会重复执行，除非是严格模式的影响。
• 依赖数组的隐性不稳定：看起来依赖是undefined，但实际可能是某个动态计算的结果（比如props.someKey，而props每次渲染都是新对象）。不过undefined是原始值，Object.is(undefined, undefined)确实返回true，这种情况概率较低，但可以通过打印每次渲染的依赖值确认。

排查与解决步骤 #

• 检查严格模式配置：查看根组件是否被<React.StrictMode>包裹，若处于开发环境，这是正常调试行为，无需修复，生产环境会自动恢复正常。
• 验证组件渲染触发源：使用React DevTools的Profiler工具，查看组件频繁渲染的原因，是否是父组件传递了新的props、自身state频繁更新等，针对性优化组件渲染次数。
• 确认依赖的稳定性：在useMemo回调中打印依赖值，或者在组件渲染时打印依赖，确保每次渲染时依赖确实是稳定的undefined，没有出现意外的变化。
• 确保useMemo回调是纯函数：回调中不能包含修改外部变量、调用API等副作用操作，纯函数才能保证useMemo的缓存逻辑正常工作。

示例验证 #

比如这段代码：

import { useMemo } from 'react';

function TestComponent() {
  const result = useMemo(() => {
    console.log('useMemo执行');
    return '测试值';
  }, [undefined]);

  return <div>{result}</div>;
}

在开发环境的严格模式下，控制台会打印两次useMemo执行；关闭严格模式或打包到生产环境后，只会打印一次。

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