NextJS中useEffect页面渲染时触发两次的问题求助

问题原因 #

在Next.js 13+的App Router（或Pages Router开启Strict Mode时），开发环境下React的Strict Mode会刻意执行两次组件渲染和副作用函数，这是框架的设计行为，目的是提前发现重复执行副作用可能引发的问题（比如重复请求、内存泄漏等），生产环境下不会出现这个情况。

解决办法 #

1. 接受开发环境的两次触发（推荐） #

这是Strict Mode的预期效果，生产构建后useEffect只会执行一次。如果你的副作用逻辑（比如fetchEvents）是幂等的（重复执行不会有不良影响），可以不用修改代码。

2. 优化副作用逻辑，避免重复操作 #

如果不想让fetchEvents重复执行，可以在函数内部增加判断，比如检查数据是否已加载：

// 假设你用状态管理数据加载状态
const [events, setEvents] = useState(null);

const fetchEvents = async () => {
  if (events) return; // 数据已存在则跳过请求
  const res = await fetch('/api/events');
  const data = await res.json();
  setEvents(data);
};

useEffect(() => {
  if (!jwt) {
    console.log('you are not login');
  } else {
    console.log(cookie.GREEN_COOKIE);
  }

  fetchEvents();
}, []);

3. 关闭Strict Mode（不推荐） #

如果必须在开发环境消除两次触发，可以修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // 关闭Strict Mode
};

module.exports = nextConfig;

注意：关闭后会失去Strict Mode的错误检测能力，可能错过潜在的代码问题，不建议长期使用。

你的代码示例 #

useEffect(() => {
  if (!jwt) {
    console.log('you are not login');
  } else {
    console.log(cookie.GREEN_COOKIE);
  }

  fetchEvents();
}, []);

控制台截图 #

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