API called twice while useEffect triggered once. ReactJS/Javascript

i am building a project, in which when user click the buyNow button in Basket (child 2) it will pass the props back to parent where it further pass it to another child in Signin(child 3) where we call an API call(inside useEffect) to update the mysql database but it seems that the API call is called twice as in database two records are being created and in front end i got two identical invoices record but different file names.

Any suggestion guys why i am facing this, please note if i remove the useEffect statement from the Signin it will then continuously non-stop call the API call so i think i cant remove the useEffect, other then this i cant see why it is happening. any suggestion please.

Main (APP)___|
             |_Child 1(Home)
             |_Child 2 (Basket)
             |_Child 3 (signin)(API triggers here)---Sub Child 3-1 (useraccount)

Update-1: After removing the strictMode it does solve the issue, but does it means if i temporarily fixed the issue or if i have to use the stricMode and find the real problem

Child 2- Basket– Customer press the buyNow button and it triggers resetBasket function


     const buyNow = (basketItems) => {
      resetBasket(basketItems);
         window.location.href = "http://localhost:3000/signin";
      };
    
     <ButtonGroup aria-label="quantityofproduct">
                        <Button variant="secondary" name="subtract" value="subtract" onClick={() => buyNow(basketItems)}>
                          Buy Now
                        </Button>
                      </ButtonGroup>

Main App resetBasket takes the basketitems and pass to parent element

      const [finalBuy, setfinalBuy] = useState(finalbuyitems());
    
    
    
    
     const resetBasket = (basketItems) => {
       setfinalBuy(basketItems);
        window.localStorage.setItem("user-final", JSON.stringify(basketItems));
    }
    
    
    
     <Route
                  path="/basket"
                  exact
                  render={(props) => (
                    <Basket {...props} userData={userData} userstatus={siginalready} basketItems={basketItems} updatedBasket={updatedBasket} resetBasket={resetBasket} />
                  )}
                />
    
    
     <Route
                  path="/signin"
                  exact
                  render={(props) => <Signin {...props} buyNow={buyNow} resetBuynow={resetBuynow} userData={userData} finalBuy={finalBuy} userstatus={siginalready} />}
                />

Child 3 – Signin ,here we call the API call(using useEffect) and update the Mysql server and recieve the invoice in PDf format from backend

  const [allInvoices, setallInvoices] = useState([]);

// The API call in the useEffect is triggering twice and thats why i am getting two invoices and two record at backend

  useEffect(() => {

 const headers = new Headers();
    headers.append("content-type", "application/json");
const options = {
      method: "POST",
      headers,
      credentials: "include",
      body: JSON.stringify(),
    };

    const newRequest = new Request("http://localhost:5000/api/invoice-all", options);

    (async () => {
      const invoiceFetch = await fetch(newRequest)
        .then((data) => {
 return data.json();
        })
        .then((data1) => {
 setallInvoices(data1);
        })
        .catch();
    })();
  // }, []);
 return <div>{userstatus ? <Useraccount userinfo={userData} userstatus={userstatus} finalBuy={finalBuy} allInvoices={allInvoices} /> : <SigninOptions />}</div>;

Sub Child-Useraccount then it display the items recieved from the backend-mysql nodejs

     // here the return is showing two different invoices of same items bought i.e two times the API is being called
    return (
    allInvoices.map((eachInvoice, index) => {
    ........................................})

Answer

I think the <React.StrictMode> is causing double execution. Please take a look after removing it from your top level component. Please refer This Link for more details on StrictMode double execution.

Advertisement

Answer