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

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

• async functions implicitly return a promise, and;
• useEffect expects its callback to either return nothing or a clean-up function.

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`);
  setProducts(products);
}, []);

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.