未修改Props/State时组件重渲染原因及useEffect重复执行问题

我开发了一个极简React应用，仅包含一个内部带有console.log("first")的useEffect钩子。我预期该console.log("first")仅执行一次，但实际却因组件重渲染而打印了两次，恳请指导原因。

export default function App() {
  useEffect(() => {
    console.log("first");
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

原因说明 #

这是React 18及以上版本开发环境下严格模式的默认行为：

• 为了帮助开发者提前排查重复执行可能引发的问题（比如未正确清理副作用、状态逻辑异常等），严格模式会刻意重复执行组件函数体、无依赖的useEffect回调、useMemo/useCallback的回调函数。
• 这种重复执行仅存在于开发环境，生产环境中useEffect会按预期只执行一次。

临时解决方式（开发环境） #

若想在开发时避免该现象，可找到项目入口文件（通常是index.js/index.tsx），移除<React.StrictMode>对根组件的包裹即可。

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