Duplicate value returned in Promises react

Question

I working on a Covid-19 react. Js app in which I am fetching data from API to display on the screen. In this code, I am using promises I also using useEffect hook, but my issue is when I console.log the response it prints it 2 times, why is that? Can anyone point me in the right direction? thanks in advance!

    import "./components/style.css";
import { useEffect, useState } from "react";
import Summery from "./Summery.js";
// import Summery from "./summery";
function App() {
  const [covidData, setcovidData] = useState("");
  const [desireCountry, setdesireCountry] = useState("pakistan");
  const getData = async () => {
    try {
      const url = `https://covid-19.dataflowkit.com/v1/${desireCountry}`;
    setdesireCountry("");
    const covidData = await fetch(url);
    const featchedData = await covidData.json();
    console.log(featchedData);
    // destruing of object
    const {
      Country_text,
      ["Last Update"]: lastUpdate,
      ["Total Cases_text"]: totalCases,
      ["Total Deaths_text"]: deathCases,
      ["Total Recovered_text"]: recoverCases,
      ["New Deaths_text"]: newDeaths,
      ["Active Cases_text"]: activeCases,
      ["New Cases_text"]: newCases,
      ["Total Deaths_text"]: totalDeaths,
    } = featchedData;
    // use to check if country exist or not
    if (Country_text === "World") {
      alert("Country name not correct.please Enter a correct country name");
    } else {
      const coronaData = {
        Country_text,
        lastUpdate,
        totalCases,
        deathCases,
        recoverCases,
        newDeaths,
        activeCases,
        newCases,
        totalDeaths,
      };
      setcovidData(coronaData);
    }
    }
    catch(err) {
      alert(`server not responding`)
    }
    
  };
  useEffect(() => {
    getData();
  }, []);
  const {
    Country_text,
    lastUpdate,
    totalCases,
    deathCases,
    recoverCases,
    newDeaths,
    activeCases,
    newCases,
    totalDeaths,
  } = covidData;

  return (
    <>
      <div className="input_part">
        <div className="input_part_main">
          <input
            type="text"
            placeholder="Search Your Location"
            value={desireCountry}
            onChange={(e) => {
              setdesireCountry(e.target.value);
            }}
          />
          <button onClick={getData}>
            {/* <i className="bi bi-search"></i> */}/
          </button>
        </div>
      </div>
      <div className="update">
        <h4>{Country_text},LIVE CORONA UPDATE</h4>
        <div className="redlight"></div>
      </div>
      <table className="table ">
        <thead className="thead-dark">
          <tr>
            <th scope="col">COUNTRY</th>
            <th scope="col">Total Cases</th>
            <th scope="col">Active Cases</th>
            <th scope="col">Recover Cases</th>
            <th scope="col">New Cases</th>
            <th scope="col">New Death Cases</th>
            <th scope="col">Total Deaths</th>
            <th scope="col">Last Update</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">{Country_text}</th>
            <th scope="row">{totalCases}</th>
            <th scope="row">{activeCases}</th>
            <th scope="row">{recoverCases}</th>
            <th scope="row " className="red">
              {newCases}
            </th>
            {/* <th scope="row">{deathCases}</th> */}
            <th scope="row " className="red">
              {newDeaths}
            </th>
            <th scope="row">{totalDeaths}</th>
            <th scope="row">{lastUpdate}</th>
          </tr>
        </tbody>
      </table>
      <Summery/>
    </>
  );
}

export default App;

Answer 1

This will only happen on local build ,on your production build it will only run once In order to run only once on local build open index.js file and remove <StrictMode>.

Answer 2

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

If you have StrictMode enabled in your app but don't remember enabling it, it might be because you used create-react-app or similar to create your app initially, which automatically enables StrictMode by default.

For example, you might find that your {app} is wrapped by <React.StrictMode> in your index.js:

  ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

If so, you can disable StrictMode by removing the <React.StrictMode> tag:

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );