0

I am trying to achieve something like the following using useEffect in React:

useEffect(() => {
    ApiCall_A()
        .then(ApiCall_B)
}, []);

However, it seems like ApiCall_B() does not wait for ApiCall_A() to finish executing. I have tried rewriting the useEffect multiple times but to no success. I suspect there might be something wrong with ApiCall_A().

Here is the code for ApiCall_A():

async function ApiCall_A() {
  const gid = getGrandidsession();
  if (gid) {
    await handleOrderSignature(gid);
  }
}

async function handleOrderSignature(gid) {
  const order = JSON.parse(sessionStorage.getItem("ORDER_TO_BE_PLACED"));
  if (order) {
    sessionStorage.removeItem("ORDER_TO_BE_PLACED");
    order.grandIdSession = gid;
    const res = await placeOrder(order, order.placedByOrgId); // THIS IS THE SLOW API CALL
  }
}

EDIT:

Because I am running my React app in strict mode the component mounts twice, and because of this line:

sessionStorage.removeItem("ORDER_TO_BE_PLACED");

The order item is not present in the second mount which then returns and start the execution of ApiCall_B :)

Ideefix Lindé
  • 9
  • 2
  • 4
    It should be `then(ApiCall_B)` otherwise you're calling `ApiCall_B` by using `()` instead of the `.then()` calling it for you – Nick Parsons Jun 15 '23 at 23:23
  • @NickParsons you're right. However, I found a second issue which I published as an comment regarding the sessionStorage.RemoveItem() and multiple mounts in strict mode. – Ideefix Lindé Jun 17 '23 at 15:44

0 Answers0