DEV Community

Cover image for 💡 React Hooks: async function in the useEffect

💡 React Hooks: async function in the useEffect

Danial Dezfouli on June 04, 2021

When you're new to React Hooks, you may notice that you get warnings and bugs if you use an async function inside the useEffect Hook. Let's find ou...
Read full post
Collapse
 
valeriavg profile image
Valeria •

As it was already mentioned in the comments, having raw async functions in the useEffect is always a bad idea. Once created, the promise cannot be stopped, it will inevitably resolve or fail, even if the component itself is long gone.
In other words, one needs to make sure that when promise results are evaluated the mounted state is taken into consideration or that errors are properly silenced

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto •

Exactly... and then the console yells at you that there's a state changed in a unmounted component and that's a memory leak bug in the app.

After sometime experimenting with api call in useEffect at work we got to the conclusion that any async logic state goes to Redux. Better to have a more complex and organized store and leave components with simple logic.

Collapse
 
danialdezfouli profile image
Danial Dezfouli •

As Samuel mentioned, we can check if the component is unmounted or not to update the state.

Thread Thread
 
icyjoseph profile image
Joseph •

Not really... You shouldn't really be doing handcrafted isMounted checks at all. To prevent state updates from an unstoppable promise/async function, use a ref on an HTML element on whatever you are rendering on this component, if the ref.current value is null then throw in the promise or exit the async function gracefully, skipping any updates.

Of course for fetch/axios there's a proper abort/cancel mechanism.

Collapse
 
digitalbrainjs profile image
Dmitriy Mozgovoy •

having raw async functions in the useEffect is always a bad idea
Once created, the promise cannot be stopped

Unless you're using async effects with cancelable promises :)

Collapse
 
elmehdiyessad profile image
elmehdi •

Hey in order to get data once and prevent useEffect hook that render the data in the infinite loop you should just initialize an empty array as a second argument to the useEffect hook like this

useEffect(() => {
// use code here
}, [])

Collapse
 
samthecodingman profile image
Samuel Jones •

A simplistic way to dump the result would be to track whether the useEffect's unsubscribe function has been called using:

useEffect(() => {
  let disposed = false

  (async () => {
    const products = await api.index()

    if (disposed) return

    setFilteredProducts(products)
    setProducts(products)
  })()

  return () => disposed = true
}, [])
Enter fullscreen mode Exit fullscreen mode

But as others have said, Redux is often the way to go if you are doing this often and there are also the use-async-effect and @react-hook/async packages for useAsyncEffect implementations.

Collapse
 
john1625b profile image
john1625b •

I'm still getting the error

ESLint: Promises must be handled appropriately or explicitly marked as ignored with the `void` operator.(@typescript-eslint/no-floating-promises)

on the async word on the second line

Collapse
 
danialdezfouli profile image
Danial Dezfouli •

Can you share your code?

Collapse
 
apperside profile image
Apperside •

I think there is an error in the following sentence:

Async functions always return a promise so you will have the actual value until the Promise is fulfilled

It should be

Async functions always return a promise so you will NOT have the actual value until the Promise is fulfilled

Collapse
 
danialdezfouli profile image
Danial Dezfouli •

Thank you, I made a grammatical error

 
rrsai profile image
Roy R. •

You mention two npm packages, but pulling in two extra npm packages just to get data from an api (something every page will require on average) is not a good "solution". And if those are the react external docs for using an api within useEffect, a lot of people are going to be googling elsewhere for solutions, as it's not even mentioned within the first ten pages of text. And explicitly says that APIs are one of the use cases of useEffect, then doesn't exaplain how to interact with an api in the guide itself.

At it's base, let's say you have fetch & React available, not two custom developed packages from the npm ecosystem. You then need to load in api data from the results of a promise, and using async/await should be the first step... ...which causes problems with useEffect.

Catch-22. What a mess.

Collapse
 
symaticvisuals profile image
Deepanshu Goel •

Hey, I didn't understand the concept thoroughly. Can you explain a little bit more.

Collapse
 
danialdezfouli profile image
Danial Dezfouli • • Edited

Some developers tried to use async functions in useEffect and got warnings/bugs with the following code:

Anti-Pattern: async function directly in the Hook 

useEffect(async () => {
await fetch(EXAMPLE_URL)
}, []);
Enter fullscreen mode Exit fullscreen mode

I have explained the reason why eslint shows warnings and our cleanup function will not run (because of the async function).

Async functions have to be written in the callback as follows:

useEffect(() => {
    (async () => {
      const products = await api.index()
      setProducts(products)
    })()
  }, [])
Enter fullscreen mode Exit fullscreen mode
Collapse
 
amn3s1a2018 profile image
Amn3s1a2018 •

There is an useAsyncEffect custom hook. (Out there in some npm package) The cleanup function is passed in a separate parameter, so it doesn't share the full scope of the effect function, like it does in the original useEffect hook.
You may write your own if that option is more pleasant.

Collapse
 
rrsai profile image
Roy R. •

??? What is then the alternative? I mean, we're reaching out to an api over the network, as is necessary.