I'd like to use async function in useEffect but it ain't work

Question

This is my side project and I'd like to use an async function that returns users data. So I declared the async function outside of useEffect and try to setState in the async function.

when I console.log res in then block, it shows the result I expected but when I console.log outside of async getData function, it won't work

why setUsersData(setState) doesn't work as i expected?

const FeedPage = () => {
  const [usersData, setUsersData] = useState()

  const getData = useCallback(async () => {
    // eslint-disable-next-line promise/always-return
    await Goodlogging.inquireFeed().then((res) => {
    // when i console.log here it returns as i expected...
      console.log(res.data)
      setUsersData(res.data)
    })
  }, [])


  useEffect(() => {
    // try to console.log data but it returns undefined ...
    console.log('usersData:', usersData)
  }, [usersData])

  useEffect(() => {
    getData()
  }, [getData])

await Goodlogging.inquireFeed().then((res) => { should just be const { data } = await GoodLogging.inquireFeed();. Don't mix .then with await. — Jared Smith
– Jared Smith, Commented Aug 18, 2022 at 13:51
Does this answer your question? Why does calling react setState method not mutate the state immediately? — Jared Smith
– Jared Smith, Commented Aug 18, 2022 at 13:51

Mina · Accepted Answer · 2022-08-18 13:52:59Z

2

The useEffect callback can't be async, but you can declare a self-executable async function inside.

Also, side note, don't use promise syntax with async/await syntax.

 useEffect(() => {
   (async () => {
     const res = await Goodlogging.inquireFeed()
     // when i console.log here it returns as i expected...
     console.log(res.data)
     setUsersData(res.data)

   })()
 }, [getData])

answered Aug 18, 2022 at 13:52

Mina

17.8k3 gold badges24 silver badges39 bronze badges

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

3 Comments

Jared Smith Over a year ago

While that is correct, he OP isn't using an async callback to useEffect....

Mina Over a year ago

Yes, he doesn't, but this is his goal, that is what I understood from the title and description of the question, he want execute an async function inside useEffect after the component has been mounted.

Jared Smith Over a year ago

Apparently it was, +1

Collectives™ on Stack Overflow

I'd like to use async function in useEffect but it ain't work

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related