Async calls in javascript can help us in API calls and fetching data from server, but why is it we can't use async calls with useEffect like shown below:

useEffect( async () => {
 // api call or data fetch
}, [])

// It gives an ERROR...

We can not directly make the callback function in useEffect hook async because of two reasons:

1. async functions implicitly returns a promise.

2. useEffect expects its callback to either return nothing or a cleanup function.

So, basically React.js useEffect hook expects a cleanup function returned from it which is called when the component unmounts. Using async here will cause a bug as cleanup function will never get called.

To work around this we can:

• Create a self-invoking anonymous function.

useEffect(() => {
   (async function () {
     console.log('any api call')
   })();
   return() => {
     // perform any cleanup
    }
}, [])

• Create a nested named function

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
  return() => {
    // perform cleanup
  }
}, [])

Thanks for reading.....

Shubham Singh