# Handle API Calls Using async await Inside the useEffect Hook in React

If you are a fan of async await syntax, then you might try using it in `useEffect` hook in React, but it does not work as expected. In this article, we will see how to handle that.

Let’s write some code using promises first and then we will convert it to async-await.
We will make an API call for displaying 10 random users.

```
useEffect(() => {
 axios.get('https://randomuser.me/api/?page=1&results=10&nat=us')
  .then(response => {
   setUsers(response.data.results);
 });
}, []);
```

Here's a [Code Sandbox Demo](https://codesandbox.io/s/laughing-bhaskara-dwi0d).

In this `useEffect` hook, we have provided an empty array `[]` as the second argument so the code inside `useEffect` will run only once when the component is mounted which is a way to implement `componentDidMount` lifecycle method in react hooks.

Now, let’s convert the same code to async await syntax.

```
useEffect(async () => {
  const users = await axios.get("https://randomuser.me/api/?page=1&results=10&nat=us");
  setUsers(users.data.results);
}, []);
```

Here's a [Code Sandbox Demo](https://codesandbox.io/s/lively-sound-cw964).

Here, we have made the `useEffect` callback function as async so we can use the await keyword inside it.

But, if you run the application, you will see a warning in the console.

Live Demo: [https://cw964.csb.app/](https://cw964.csb.app/).

![async_error.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617428028724/o5QMb06uS.png)

> In React, every warning shown in red color should be fixed as it may affect the performance or the application behavior or it may be suggestion to improve your application.

*The issue in the above code is that, when we declare any function as async, it returns a promise.*

Take a look at the below code:

```
const getResults = async () => { return "Hello"; };

const App = () => {
 const result = getResults();
 console.log(result);
 
 return null;
};
```

Here's a [Code Sandbox Demo](https://codesandbox.io/s/busy-rgb-pdqgz).

If you open the console, you will see that, the result printed is not the string “Hello” but a promise.

To get the actual value, we need to attach `.then` handler to the function call like this:

```
const getResults = async () => { return "Hello"; };

const App = () => {
 getResults()
  .then(response => console.log(response));
  
  return null;
};
```

Here's a [Code Sandbox Demo](https://codesandbox.io/s/trusting-curran-5qorx).

Now, we got the actual value `Hello` in the console.

> But we can’t attach `.then` handler to the `useEffect` hook as function passed to `useEffect` should not return anything except cleanup effect function.

So there are some ways to fix this.

* Create a separate async function outside `useEffect` and call it from the `useEffect`:

```
const getUsers = async () => {
 const users = await axios.get('https://randomuser.me/api/?page=1&results=10&nat=us');
 setUsers(users.data.results);
};

useEffect(() => {
 getUsers();
}, []);
```

Here's a [Code Sandbox Demo](https://codesandbox.io/s/eloquent-solomon-o32gn).

* Create a separate async function inside `useEffect` and call it from `useEffect`:

```
useEffect(() => {
  const getUsers = async () => {
    const users = await axios.get("https://randomuser.me/api/?page=1&results=10&nat=us");
    setUsers(users.data.results);
  };
  getUsers();
}, []);
```

Here's a [Code Sandbox Demo](https://codesandbox.io/s/trusting-mclaren-p77vn).

* Use an IIFE(Immediately Invoked Function Expression):

```
useEffect(() => {
 (async () => {
  const users = await axios.get("https://randomuser.me/api/?page=1&results=10&nat=us");
  setUsers(users.data.results);
 })();
}, []);
```

Here's a [Code Sandbox Demo](https://codesandbox.io/s/distracted-sky-d8qgn).

### Thanks for reading!

Want to learn all ES6+ features in detail including let and const, promises, various promise methods, array and object destructuring, arrow functions, async/await, import and export and a whole lot more from scratch?

Check out my [Mastering Modern JavaScript](https://modernjavascript.yogeshchavan.dev/) book. This book covers all the pre-requisites for learning React and helps you to become better at JavaScript and React.

**Check out free preview contents of the book [here](https://www.freecodecamp.org/news/learn-modern-javascript/).**

Also, you can check out my **free** [Introduction to React Router](https://yogeshchavan.podia.com/react-router-introduction) course to learn React Router from scratch.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? [Follow me on LinkedIn](https://www.linkedin.com/in/yogesh-chavan97/).

[<img src="https://gist.github.com/myogeshchavan97/98ae4f4ead57fde8d47fcf7641220b72/raw/c3e4265df4396d639a7938a83bffd570130483b1/banner.jpg">](https://bit.ly/3w0DGum)

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)