Acabo de crear un componente simple en ReactJs y llamé a una API con axios, pero noté en la pestaña de red del navegador que mi API llamó dos veces en el primer renderizado, también probé con un registro de la consola, ¡también regresó dos veces! ¿por qué? Busqué en Google y la gente dijo que esto es normal en el componente funcional y el comportamiento normal, ¡pero no quiero solicitar la API dos veces! ¿alguna idea?

 import React, { useEffect, useState } from "react"; export default function User() { useEffect(() => { getUser().then(); // it call api twice, I got data twice! console.log(111); // return twice }, []); const getUser = async () => { const user = await Api.Get("User"); if (user.status === 200) { console.log(user); } }; return ( <> <div>Hello</div> </> ); }

Aquí uso el componente de usuario: Router.js

 <BrowserRouter basename="/"> <Routes> <Route exact path='/user' element={<User/>}></Route> </Routes> </BrowserRouter>