useEffect默认执行两次解决方法

转自 https://blog.csdn.net/SJJ980724/article/details/126144594

代码如下：

 useEffect(() => {
    console.log("useEffect调用了~");
  }[]);

刷新页面初始化打印发现

useEffect调用了~
useEffect调用了~

查阅发现是react18将useEffect的默认运行改为了两次。
这个更改只有在开发模式才会发生，且只在只在 strict mode 发生，恰恰如此无疑令很多开发者感觉很蛋疼

解决方法
可以删掉 index.tsx或者 index.js文件里的 StrictMode，把这样的

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

改为这样的

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<App />);

就好了