ReactJS页面刷新时useEffect执行两次问题排查

这是React 18开发环境下的正常现象，根源在于**严格模式（Strict Mode）**的特性：

• React 18在开发模式中，会对组件进行两次挂载+卸载的重复操作，目的是帮你检测那些没有正确清理的副作用（比如未取消的订阅、未清除的定时器）。
• 你的useEffect依赖数组为空，属于组件挂载时执行的副作用，因此会被严格模式触发两次。

验证方式 #

检查你的项目入口文件（通常是index.js），大概率能看到类似这样的代码：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<React.StrictMode>是默认开启的，这就是导致两次打印的直接原因。

解决方案 #

1. 无需特殊处理：生产环境下严格模式会自动关闭，useEffect只会执行一次。
2. 临时关闭严格模式：如果想在开发环境避免两次执行，可以移除<React.StrictMode>标签，但不推荐这么做——严格模式能帮你提前排查潜在的副作用问题，是React官方推荐的开发配置。

你的代码里没有状态更新逻辑，两次打印完全是严格模式的机制导致的，不属于代码错误。

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