Async / await code not called in useEffect function

Question

I can't figure out why the await function setDoc is not completed in my example below when I launch my react native app for the first time.

When I launch it a second time however, it works well.

Can you help me?

useEffect(() => {

    registerForPushNotificationsAsync().then(async token => {
      
      // The following gets called
      console.log("Before await")

      // The following does not complete when I first launch the app.
      await setDoc(doc(db, "devices", token), { test: "test" })
        .then(x => {
          // The following does not get called
          console.log('Sucess')
          
        })
        .catch(error => {
          // The following does not get called
          console.log('Error')
        })

      // The following does not get called
      console.log("After await")
    });

    return () => {};
  }, []);

with registerForPushNotificationsAsync defined outside useEffect as:

async function registerForPushNotificationsAsync() {
  ...
  return token;
}

Thank you.

@NullPointerException, I've just tried: removing .then() and .error() does not solve my problem. — Gabriel
– Gabriel, Commented Jul 20, 2022 at 7:51
These are the setDoc and doc methods from firebase: firebase.google.com/docs/firestore/manage-data/… — Gabriel
– Gabriel, Commented Jul 20, 2022 at 8:00
Might need to see your code in the registerForPushNotificationsAsync because the code you have posted doesn't explain the behaviour you are seeing — Daniel Duong
– Daniel Duong, Commented Jul 20, 2022 at 8:19

nilskch · Accepted Answer · 2022-07-20 07:53:34Z

1

Try moving the async function outside of the useEffect function:

const someAsyncFunc = async () => {
    console.log("Before await")
    try {
        const token = await registerForPushNotificationsAsync();
        await setDoc(doc(db, "devices", token), { test: "test" })
        console.log('Success')
    } catch (error) {
        /// do error handling
        console.log(error);
    }
    console.log("After await")
}

useEffect(() => {
  someAsyncFunc();
}, []);

answered Jul 20, 2022 at 7:53

nilskch

4366 silver badges12 bronze badges

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

2 Comments

Gabriel Over a year ago

I've just tried your solution, unfortunately it does not change the problem, the setDoc function does not complete.

nilskch Over a year ago

I think your setDoc function does not work properly. Can you try debugging it? I would recommend to call the setDoc function with a button and add debug logs. I hope this helps.

Kavindu Vindika · Accepted Answer · 2022-07-20 07:53:45Z

0

use async await as follows.

useEffect(() => {
  registerForPushNotificationsAsync().then(async (token) => {
    // The following gets called
    console.log('Before await');

    try {
      await setDoc(doc(db, 'devices', token), { test: 'test' });
      console.log('Sucess');
    } catch (error) {
      console.log('Error');
    }

    // The following does not get called
    console.log('After await');
  });

  return () => {};
}, []);

answered Jul 20, 2022 at 7:53

Kavindu Vindika

2,7972 gold badges16 silver badges23 bronze badges

1 Comment

Gabriel Over a year ago

Similar to the previous answer : I've just tried your solution, unfortunately it does not change the problem, the setDoc function does not complete.

nem0z · Accepted Answer · 2022-07-20 08:23:26Z

0

If there a reason why you want to use await there ?

Otherwise you should try to do this using only .then and syncronious code :

useEffect(() => {

    return registerForPushNotificationsAsync().then(async token => {
    
    // The following gets called
    console.log("Before await")

    // The following does not complete when I first launch the app.
    return setDoc(doc(db, "devices", token), { test: "test" })
        .then(x => {
        // The following does not get called
        console.log('Sucess')
        
        })
        .then(() => {
            // The following does not get called
            console.log("After await")
            return () => {};
        })
        .catch(error => {
        // The following does not get called
        console.log('Error')
        })
    });
}, []);

edited Jul 20, 2022 at 8:23

answered Jul 20, 2022 at 7:50

nem0z

1,1371 gold badge7 silver badges23 bronze badges

1 Comment

Gabriel Over a year ago

It does not work either, thanks for the answer.

Collectives™ on Stack Overflow

Async / await code not called in useEffect function

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related