useEffect默认执行两次解决方案

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

此出处是 create-react-app 的创建的app
代码如下：

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

控制台输出：

useEffect调用了~
useEffect调用了~

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

解决方法

可以删掉 index.tsx 文件里的 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 />);

再看一下控制台输出：

useEffect调用了~

成功解决~