Learn how to use async inside useEffect hook1 min read

Did you stumble upon a WTF moment when using async inside useEffect hook?

I saw that some of the developers don’t quite understand how to use useEffect together with promise/async.

So, today I want to show you the proper way of using async inside React’s useEffect hook, so you can avoid those WTF moments and get more control over your app’s performance.

Let’s say we need to query API (fetchProducts) which will return a list of products.

Now, straight from your head, you would most probably write something like this (this will not work, anymore):

useEffect(async () => { 
const fetchedProducts = await fetchProducts(); 
setProducts(fetchedProducts)`
return () => { 
// memory leaks...`
};
}, []);

As you can see, we would have memory leaks here, so it’s not possible to use this anymore.

Why?

useEffect hook calls a (return) cleanup function when the component unmounts. When using an async function we will have a bug as the cleanup function will never get called.

So the proper way is to use an immediately-invoked function

export default function Products() {
const [products, setProducts] = useState([]);
useEffect(() => {
(async () => {
const fetchedProducts = await fetchProducts();
setProducts(fetchedProducts)
})()
}, []);
return (
<div className='proizvodiWrapper'>
<SearchWeb />
{products.length > 0 &&
renderButtons(products)
}
<Footer />
</div>
);
}

OR by using a named function:

export default function Products() {`
const [products, setProducts] = useState([]);
useEffect(() => {
const getProductData = async () => {
const fetchedProducts = await fetchProducts();
setProducts(fetchedProducts)
};
getProductData();
}, []);
return (
<div className='proizvodiWrapper'>
<SearchWeb />
{products.length > 0 &&
renderButtons(products)
}
<Footer />
</div>
);
}

I prefer using the immediately-invoked function as it looks cleaner.
What about you?

Cheers.