API getting called twice in React-CodePudding

My API is getting called twice on browser page reload as checked in the console. Can you please suggest. I am using axios to call the API in React.

import React, {useState,useEffect} from "react"

import {Container,Row,Col} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css"
import './App.css';

import Axios from "axios";
import MyCard from "./MyCard";

function App() {

  const[details,setDetails]=useState({});

  const fetchDetails=async ()=>{
    const {data}=await Axios.get("https://randomuser.me/api/");
    console.log("RESPONSE:",data);
    const details=data.results[0];
    setDetails(details)
  }

  useEffect(()=>{
    fetchDetails();
  },[])

  return (
    <Container fluid className="p-4 bg-primary App">
      <Row>
        <Col md={4} className="offset-md-4 mt-4">
          <MyCard details={details}/>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

CodePudding user response：

If you are using StrictMode, the useEffect hook with empty array dependencies will be called twice.

CodePudding user response：

Fixed 1

This only happens in dev mode. Going live will solved your problem.

Fixed 2

Removing strict mode will solved your problem.

For Example

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

root.render(
    <App />
);