React Async and Await

In the last lesson, React Fetch API, you fetched data with .then chains. Here we rewrite that same fetch with async and await so it reads top to bottom, and we cover the one tricky part of using it inside useEffect.

🤔 Why async and await?

The .then chains work, but they get tangled as the logic grows. Here’s the pain.

• Each step is a callback inside another callback, so the code drifts to the right.
• The order you read it isn’t quite the order things happen.
• Error handling with .catch sits at the bottom, far from the line that might fail.
• More steps mean more arrows, and it gets harder to follow.

So async/await lets you write asynchronous code that reads like normal, step-by-step code. Same behavior, much easier to follow.

🧩 The same fetch, two ways

Let’s see them side by side. Here’s the .then version you already know, then the async/await version that does the exact same thing.

// the .then way
function loadUsers() {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => response.json())
    .then((data) => console.log(data));
}

// the async/await way - same result, reads top to bottom
async function loadUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();
  console.log(data);
}

Read the async version line by line.

• async in front of the function marks it as asynchronous, which lets you use await inside.
• await pauses on that line until the promise finishes, then gives you the result.
• So await fetch(...) waits for the response, and await response.json() waits for the parsed data.
• No callbacks, no nesting, just plain lines in the order they happen.

🛡️ Add try/catch for errors

With .then you used .catch for failures. With async/await, you wrap the code in a try/catch block instead, which keeps the error handling right next to the code.

async function loadUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Something went wrong:", error);
  }
}

Here’s how the two blocks split the work.

• The try block holds the normal path, the steps you hope succeed.
• If any await in there fails, JavaScript jumps straight to catch.
• The catch block gets the error so you can handle it, like showing a message.
• So success and failure are both right there, easy to read together.

💡 Using async/await inside useEffect

Now the one part that trips everyone up. You cannot make the useEffect callback itself async, so you define an async function inside the effect and call it.

import { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // define an async function inside the effect
    async function loadUsers() {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        console.log("Failed to load users:", error);
      }
    }

    loadUsers(); // then call it
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Look at the pattern carefully, because it’s the standard one.

• We define loadUsers as an async function inside the effect.
• Inside it, we await the fetch and the JSON, then save the data with setUsers.
• After defining it, we call loadUsers() on its own line.
• The effect callback itself stays a normal function, not async.

🔍 Why not make the effect itself async?

It helps to know the real reason, so the rule sticks.

• useEffect may return a cleanup function, and React runs that on unmount.
• An async function always returns a promise, never your cleanup function.
• So React would get a promise where it expected cleanup, and your cleanup would never run.
• That’s why the inside-function pattern isn’t just style. It keeps the effect’s return value correct.

⚠️ Common Mistakes

The top mistake is forgetting await, so you work with a promise instead of the real value.

// ❌ no await - data is a Promise, not your array
const data = response.json();
console.log(data.length); // undefined or wrong

// ✅ await it to get the actual value
const data = await response.json();
console.log(data.length); // works

Keep these in mind.

• Don’t forget await. Without it you hold a promise, not the value, and things look “empty” or undefined.
• Don’t use await outside an async function. It’s a syntax error.
• Don’t make the useEffect callback async. Define the async function inside and call it.

✅ Best Practices

A few habits for clean async code in React.

• Prefer async/await over long .then chains. It reads top to bottom and is easier to follow.
• Wrap your awaits in try/catch so failures are handled right next to the code.
• Inside useEffect, define an async function and then call it.
• await every promise whose result you actually need before using it.

🧩 What You’ve Learned

• ✅ async/await writes the same async logic as .then, but it reads top to bottom
• ✅ await pauses until a promise finishes and gives you its result
• ✅ await only works inside a function marked async
• ✅ Use try/catch for errors instead of .catch, keeping handling next to the code
• ✅ Don’t make the useEffect callback async; define an async function inside and call it
• ✅ Forgetting await leaves you holding a promise instead of the real value

🚀 What’s Next?

Now your fetch code is clean and readable. But a real request takes time, and right now the user sees nothing while they wait. Next you’ll add a loading state so the screen says “Loading…” until the data arrives.

React API Loading States