React中useEffect内getUsers函数执行两次，如何实现仅执行一次？

原因 #

在React 18及以上版本的开发模式中，StrictMode会强制组件挂载两次（包括触发useEffect），目的是帮你检测代码中可能存在的副作用问题，比如未清理的定时器、重复订阅等。同时你的useEffect没有设置依赖数组，原本就会在组件每次渲染时执行，叠加StrictMode的行为就出现了执行两次的情况。

解决方案 #

方法1：给useEffect添加空依赖数组 #

这是最推荐的做法，空依赖数组[]会告诉React这个useEffect只在组件首次挂载时执行一次：

import './App.css';
import FetchApi from './components/FetchAPI/FetchApi';
import React,{useEffect} from 'react'

function App() {
  const getUsers = async() => {
       console.log("function")
    }
    useEffect(() => {
        console.log("use")
        getUsers();
    }, []); // 添加空依赖数组，限定仅首次挂载执行
  return (
    <FetchApi/>
  );
}

export default App;

方法2：临时移除StrictMode（不推荐） #

如果你只是在开发阶段想临时避免这个行为，可以找到项目入口文件（通常是index.js），去掉<StrictMode>的包裹：

// 修改前
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 修改后
root.render(
    <App />
);

但不建议这么做，因为StrictMode能帮你提前发现很多潜在的代码问题，上线生产环境时StrictMode会自动失效，不会影响线上运行。

内容的提问来源于stack exchange，提问作者Hamza Abbas