Doing an asynchronous operation inside a functional component

Question

I usually take care of any promises or asynchronous operations in the componentDidMount or componentWillMount lifecycle methods, but now I am using only functional components.

So I have something like this:

export async function MyComponent () {
  const data = await myPromiseFunction()

  return (
    <>
      DO SOMETHING!
    </>
  )
}

This obviously cannot be done because we are returning a promise when using MyComponent. So my question becomes how can I do asynchronous operations within the functional component?

Do I just have to accept that they have to be done elsewhere and receive my necessary data as props? Or is there a cleaner way to get around this?

https://tinkerylabs.com/ajax-calls-with-react-hooks/ – Taki Jul 31 '19 at 20:01 — Taki, Jul 31 '19 at 20:01

score 2 · Accepted Answer · answered Jul 31 '19 at 20:10

you need Hooks; namely Effects hook.

there you can send http request within useEffect(() =>{ callMyApi()}) block.

you can see an example here: React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing

Doing an asynchronous operation inside a functional component

1 Answers1