为何空依赖数组的useEffect会执行两次？

你的代码本身没有问题，空依赖数组的useEffect确实应该只在组件挂载时执行一次。出现两次日志最常见的原因是你开启了React 18的严格模式。

在React 18的开发环境下，严格模式会刻意重复执行以下操作：

• 组件的构造函数、render函数
• useEffect、useLayoutEffect的回调函数
• useState的初始化函数

这么做的目的是帮你提前发现潜在的副作用bug，比如组件卸载时没有清理定时器、订阅等资源的问题。而生产环境下，这个重复执行的行为会自动消失。

验证和解决方法： #

• 检查项目入口文件（比如index.js/main.jsx），看是否用<StrictMode>包裹了App组件。如果是，临时去掉它，开发环境下日志就只会打印一次。不过不建议长期关闭严格模式，它能帮你提前规避很多问题。
• 直接构建生产版本（执行npm run build后运行打包后的代码），你会发现日志只输出一次。

其他小概率情况： #

如果不是严格模式的问题，再检查是否不小心多次渲染了App组件——比如路由配置重复、父组件频繁挂载卸载导致App反复渲染，但这种情况比较少见。

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