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.

Hope you found this post useful. It was published . Please show your love and support by sharing this post.