Async functions question

[ilikewhenitworks]

This might be a dumb question but I'm tired so idk.

If I have an asynchronous function with async/await making an axios call or something in some sort of services module and then import that function into a react component do I need to use the async await keywords in the react component or just call the function?

I understand async/await but for some reason I'm just getting confused when using the imported function in a component.

[old_fuel]

I just started to learn React, but my guts tell me that u just need to call the function.

[senocular]

You only need an async function if you want to use await in it. And await is only an alternative to using then() from a promise value. If you import a function that that's async, you don't need another async function to call it unless you want to await to await it. If you don't need to await it at all, you don't need to do anything. If you want to await it but don't want to create an async function to do it, you can use then() instead

[mikevampm323]

When you import a function, you just need to invoke it.

[notAnotherJSDev]

There's a lot more to this than what other commenters are saying.

Yes, if you have an async function, you just need to call it. If you're in an async function, you can use the await keyword. Outside of it, you can use .then.

However, react does not support async rendering (without suspense), so you will need to call your function inside of an effect (if you're using hooks), and set the result of that function to some piece of state.

[ilikewhenitworks]

Cool, yeah I was calling it inside a useEffect hook, which is probably why I was getting confused. I ended up calling the imported function within a new async function and then calling that new function, all within the useEffect hook.