🛎️ 本文非原创，翻译自 这篇文章。

为啥执行两次

在 2022年三月，React 18 版本发布，在这个版本中，useEffect 的行为发生了改变。如果你的应用在升级 React 18 之后出现异常，那么有可能是 useEffect 执行了两次引起的。

什么情况下会执行两次

useEffect 在以下两种情况下会执行两次。

仅在开发模式下：这是每个人本地开发时构建应用的模式。

在严格模式下：这个是在使用 create-react-app 或者 Next.js 构建应用时的默认模式。

如何解决这个问题

阻止 useEffect 执行两次的方法只有一个，那就是 关闭严格模式（脑子里出现了奇怪的声音。。。）。

严格模式很重要，关闭严格模式只是一个临时的解决方案。如果你找到了能更好解决此问题的方法，记得改回来。

在 Next.js 中

你可以在 next.config.js 配置文件中关闭严格模式：

reactStrictMode:  false

在 create-react-app 中

你可以移除 index.js 中严格模式的高阶组件，即从：

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

修改为

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <App />
);