Denis Jakus

making tech less cryptic

CTO x Unique People

CTO Note

Learn how to use async inside useEffect hook1 min read

20 January 2023 Javascript

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.

Taggs:
Related Posts
Javascript Splice VS Javascript Slice

Facebook Twitter Evernote Hacker News Gmail Print Friendly Yahoo Mail reddit LinkedIn Blogger Tumblr Like Little chit-chat Hi! Let me…

How to check if a picture is an image or a floor plan by using Javascript

Facebook Twitter Evernote Hacker News Gmail Print Friendly Yahoo Mail reddit LinkedIn Blogger Tumblr Like Hi there! Oh, maaaan… This…

Write a comment
Exit mobile version