I working on a Covid-19 react. Js app in which I am featching data from api to display in screen. In this code i am using a 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;

CodePudding user response：

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>.