Why Can't React useEffect() Callback be async?

You cannot directly make the callback function supplied to the useEffect hook async because:

When you attempt to make useEffect's callback async, you will see the following warning:

// Warning: Effect callbacks are synchronous to prevent race conditions
useEffect(async () => {
  const products = await fetch(`${API_URL}/products.json`);
}, []);

Therefore, to use async/await inside the useEffect hook, you can do either of the following:

  1. Create a Self-Invoking Anonymous Function;
  2. Create a Nested Named Function.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.