async await not working as expected with react

Question

I am calling an async function inside useEffect hook in react as below.

const ab = async () => {
    console.log("start API");
    await callAPI();
    console.log("end API");
};

useEffect(() => {
    ab();
    console.log("calling");
}, []);

As the output first it will print start API then print calling and finally print end API. But what I need as the printing order is start API, end API, and calling. That's why I am using async await as well. But it's not working as expected. Any way to fix this issue?

gmoniava · Accepted Answer · 2022-08-30 13:59:11Z

1

That's the point of using await – the execution is paused until callAPI is finished.

To achieve the order you want, don't use await and just let the code run asynchronously. This way, the synchronous code (console.log('calling')) will be ran without waiting for the asynchronous code (callAPI()) to finish.

EDIT: However, depending on your use case, the other answer would probably make more sense.

edited Aug 30, 2022 at 13:59

gmoniava

28.9k9 gold badges61 silver badges101 bronze badges

answered Aug 29, 2022 at 20:22

mhalaida

1012 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

krishnaacharyaa · Accepted Answer · 2022-08-30 03:16:27Z

0

For async/await to work , you'll have to await an asynchronous function. Hence use the following code.

  useEffect(() => {
    let helper = async () => {
      await ab(); // write await here
      console.log('calling');
    };
    helper();
  }, []);

Now the output would be:

Start API
End API
calling

answered Aug 30, 2022 at 3:16

krishnaacharyaa

26k9 gold badges102 silver badges138 bronze badges

Collectives™ on Stack Overflow

async await not working as expected with react

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related