Next.js生产构建中useEffect仅触发一次是否符合预期？

安全阿岳

2026-6-25

useEffect开发与生产环境表现差异的解答

以下是涉及的useEffect代码片段：

useEffect(() => {
    console.log("useeffect 1")
    return () => {
      console.log("useeffect 2")
    };
  }, [])

在开发环境中，控制台输出为：

useeffect 1
useeffect 2
useeffect 1

在生产构建后，控制台仅输出：

useeffect 1

这种情况是否符合预期？

完全符合预期。

原因说明

React 18及以上版本的开发模式默认启用严格模式，为了帮助开发者提前排查组件在卸载/重新挂载场景下的潜在问题，会刻意触发两次组件挂载流程：第一次挂载后立即执行卸载（调用useEffect的清理函数），随后再次挂载组件。这就是开发环境中出现useeffect 1 -> useeffect 2 -> useeffect 1输出的原因。

而生产模式下，React会移除这类调试相关的行为，组件只会正常挂载一次，不会触发额外的卸载和重新挂载，因此只会执行一次useEffect的回调函数，不会调用清理函数，最终仅输出useeffect 1。

复现步骤

执行命令创建Next.js项目：npx create-next-app@latest
在页面文件中编写以下代码：

'use client'
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    console.log("useeffect 1")
    return () => {
      console.log("useeffect 2")
    };
  }, [])
  return (
    <div>TEST</div>
  );
}