useEffect默认执行两次解决方案今天写demo的时候使用最高版本的react，发现useEffect出了小问题，记

今天写demo的时候使用最高版本的react，发现useEffect出了小问题，记录一下。脚手架使用的creacte-app-react

import React, { memo, useEffect } from "react";
function App() {
  useEffect(() => {
    console.log("组件渲染");
  }, []);
  return <div>我是APP</div>;
}
export default memo(App);

QQ截图20230719200739.png

会发现useEffect的回调执行了两次

查阅发现是react18将useEffect的默认运行改为了两次。
这个更改只有在开发模式才会发生，且只在只在 strict mode 发生。

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

解决办法

将App.tsx中的 <React.StrictMode> 删除