How to use await keyword in useEffect() React Hook

Question

I want to call an several async functions in useEffect), but I am not sure how to include the await keyword to await their results

// somewhere else func1 and func2 are defined
async function func1() {...};
async function func2() {...};


// func1, func2 are imported into file of functional Component
...
useEffect(() => {
    async function foo() {
        func1();
    };
    async function bar() {
        func2();
    }
    if (...) {
        await Promise.all([foo(), bar()]);
        ...
    }
    ...
}, [])
...

This gives me

Unexpected reserved word 'await'

How to await async functions in useEffect()?

While @CertainPerformance chose the most obvious duplicate candidate, in this case, [`useEffect` can't take an async function](https://stackoverflow.com/q/53332321/1218980), and a little trick must be used, which is [highlighted in Shubham Khatri's answer](https://stackoverflow.com/a/66585259/1218980). — Emile Bergeron, Mar 11 '21 at 15:43

Shubham Khatri · Accepted Answer · 2021-03-11T15:22:48.757

3

You can create an anonymous function within useEffect and make it async likee

useEffect(() => {
    async function foo() {
        func1();
    };
    async function bar() {
        func2();
    }
    (async function() {
       if (...) {
           await Promise.all([foo(), bar()]);
           ...
        }
       ...
    
    })();
    
}, []);

or in a more cleaner manner

useEffect(() => {
    async function foo() {
        func1();
    };
    async function bar() {
        func2();
    }
    async function execute() {
       if (...) {
           await Promise.all([foo(), bar()]);
           ...
        }
       ... 
       // any code that you would have normally added 
       // in useEffect callback will now be a part of execute function
    }
    execute();
    
}, [])

edited Mar 11 '21 at 15:22

answered Mar 11 '21 at 15:10

Shubham Khatri

270,417
55
406
400

that doesn't work, `execute` is not awaited in that snippet – andi2.2 Mar 11 '21 at 15:12
1

@andi2.2 execute doesn't need to be awaited. Any logical code will bee written in execute and the lines of code written after await Promise.all will wait till promise is resolveed. Also you cannot make the callback of useEffect async – Shubham Khatri Mar 11 '21 at 15:13
will, if there is code after `execute()` function call be awaited until `await Promise.all([foo(), bar()]);` is resolved? – four-eyes Mar 11 '21 at 15:16
1

@Stophface as I mentioned in my previous comment, all code thata you would put inside of useEffect callback will go in execute function in order to use async within useEffect – Shubham Khatri Mar 11 '21 at 15:21

score -2 · Answer 2 · edited Mar 12 '21 at 06:49

This should to the trick:

// somewhere else func1 and func2 are defined
async function func1() {...};
async function func2() {...};


// func1, func2 are imported into file of functional Component
...
useEffect(async () => {
    async function foo() {
        await func1();
    };
    async function bar() {
        await func2();
    }
    if (...) {
        await Promise.all([foo(), bar()]);
        ...
    }
    ...
}, [])
...

Edit: You also can use func1() and func2() directly:

...
useEffect(async () => {
    if (...) {
        await Promise.all([func1(), func2()]);
        ...
    }
    ...
}, [])
...

How to use await keyword in useEffect() React Hook

2 Answers2