useEffect 执行两次解决方法

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

useEffect 执行了两次，我找了好久，一直以为是自己的代码问题，

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

控制台输出：

useEffect调用了~
useEffect调用了~

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

解决方法

找到入口文件 main.tsx 或者 main.jsx 文件，将里面的 <React.StrictMode></React.StrictMode> 注释掉即可

再看一下控制台输出：

useEffect调用了~