Data Fetching with useEffect

Reviewed & published by Brayan K

Data fetching means loading information from a server (an API) and showing it in your UI. Because a network request is a side effect, it belongs in useEffect. The reliable recipe: track loading, error, and data, run an async loader inside the effect, and clean up so a late response can't update an unmounted component.

Part of the free React course at LearnCodingFast — hands-on lessons with worked examples and the output they print, plus practice exercises and a quick quiz.

What You'll Learn

• Model a request as loading / error / data state
• Why a request is a side effect that belongs in useEffect
• Define an async loader inside the effect and call it
• Render a spinner, error, or result — never a blank screen
• Use a cleanup flag to ignore stale responses
• Re-fetch when the input (e.g. an id) changes via deps

1️⃣ Three States: Loading, Error, Data

Every fetch goes through three situations. Give each its own state so your render always has exactly one thing to show:

function User({ id }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  // ... effect below ...
  if (loading) return <p>Loading...</p>;
  if (error)   return <p>Error: {error}</p>;
  return <h1>{data.name}</h1>;
}

// A fetch is always in ONE of three states. Model them as plain data.
function viewFor({ loading, error, data }) {
  if (loading) return "⏳ Loading...";
  if (error)   return "❌ " + error;
  return "✅ " + data;
}

console.log(viewFor({ loading: true,  error: null, data: null }));   // ⏳ Loading...
console.log(viewFor({ loading: false, error: "Network failed", data: null }));  // ❌ Network failed
console.log(viewFor({ loading: false, error: null, data: "Hello!" }));          // ✅ Hello!

// Your component renders ONE of these three at a time — never a blank screen.

Your turn — write the same three-way decision yourself:

// 🎯 YOUR TURN — fill in each ___ then press "Try it Yourself".
// Pick what to render based on the three states.

function render({ loading, error, data }) {
  // 1) If still loading, return the loading text.
  if (___) return "Loading...";
  // 2) If there's an error, return "Error: " + error.
  if (___) return "Error: " + error;
  // 3) Otherwise show the data.
  return "Data: " + data;
}

console.log(render({ loading: true,  error: null, data: null }));
console.log(render({ loading: false, error: "404", data: null }));
console.log(render({ loading: false, error: null, data: "ok" }));

// ✅ Expected output:
//    Loading...
//    Error: 404
//    Data: ok

2️⃣ An Async Loader Inside the Effect

You can't make the effect callback itself async (it would return a promise where React expects a cleanup). Instead, define an async function inside the effect and call it. Put the id in the deps so it re-fetches when the id changes.

// Simulate the fetch flow with promises (no real network here).
// In React this runs inside useEffect; we just await it directly.

function fakeFetch(url) {
  return Promise.resolve({ json: () => ({ name: "Ada", url }) });
}

async function load() {
  console.log("state: loading = true");
  const res = await fakeFetch("/api/user/1");   // await the request
  const data = await res.json();                // parse the body
  console.log("state: loading = false");
  console.log("got:", data.name);               // Ada
}

load();
// state: loading = true
// state: loading = false
// got: Ada

3️⃣ Cleanup — Ignore Stale Responses

If the component unmounts (or the id changes) before the request resolves, calling setState on the old result is a bug. Guard with an ignore flag flipped by the cleanup function:

// RACE GUARD: an "ignore" flag stops a stale response from updating state.
let screen = "loading";
function setScreen(v) { screen = v; }

function startEffect() {
  let ignore = false;                 // reset each effect run
  // pretend the response arrives later:
  const finish = () => {
    if (ignore) { console.log("ignored stale response"); return; }
    setScreen("data: Ada");
  };
  // cleanup: if we unmount first, flip the flag
  return { finish, cleanup: () => { ignore = true; } };
}

const a = startEffect();
a.cleanup();   // component unmounted BEFORE response
a.finish();    // response arrives -> ignored, no setState
console.log("final screen:", screen);   // loading  (never overwritten)

🧩 Reorder Challenge

These lines make a correct async loader. Put them in the right order:

A.   const res = await fetch(url);
B.   async function load() {
C.   const data = await res.json();
D.   setData(data);
E.   }
F.   load();

Common Errors (and the fix)

• "useEffect must not return a Promise." — You made the effect callback async. Define an inner async function and call it instead.
• "Can't perform a React state update on an unmounted component." — A late response set state. Add the ignore flag (or an AbortController) in cleanup.
• Infinite re-fetch loop. — You put an object/array in the deps that's recreated each render, or omitted deps. Depend on the stable id, not a fresh object.
• Reading data before it loads (data.name of null). — Render the loading branch first; only touch data once it exists.

📋 Quick Reference

🧠 Quick Recall

1. Why can't the useEffect callback be async?

An async function returns a promise, but the effect must return nothing or a cleanup function. Define an inner async function and call it.

2. You fetch user id. What goes in the dependency array so it re-fetches per user?

[id] — the effect re-runs whenever the id changes.

3. What does the ignore flag prevent?

A stale response from a previous render setting state after the component unmounted or the id changed (a race condition).

Mini-Challenge: A Tiny load()

Write the async loader from the outline, await the fake fetch, and log the result. Run it and check your output.

// 🎯 MINI-CHALLENGE: a tiny load() flow
//
// 1. Write an async function load() that:
//      - logs "loading"
//      - awaits fakeFetch() (given below)
//      - logs "done: " + the resolved value
// 2. Call load().
//
// ✅ Expected output:
//    loading
//    done: 42

function fakeFetch() {
  return Promise.resolve(42);
}

// your code here

🎉 Lesson Complete

• ✅ Model a request as loading / error / data
• ✅ Fetch in useEffect via an inner async function
• ✅ Put the input (e.g. id) in deps to re-fetch on change
• ✅ Guard with an ignore flag so stale responses don't set state

Practice quiz

Continue this course

• Previous: useEffect & the Dependency Array
• Next: Strict Mode & Double-Render — Why React intentionally double-invokes in dev and how to write effects that survive it
• Quick reference: React cheat sheet › Effects & Data

Frequently asked questions

Why do I track three pieces of state — data, loading, and error?

A fetch can be in one of three situations: still in flight (loading), failed (error), or done (data). Tracking all three lets you show a spinner, an error message, or the result — and never a half-rendered screen.

Why can't I make the useEffect callback async directly?

An async function returns a promise, but useEffect expects its callback to return either nothing or a cleanup function. Define an async function INSIDE the effect and call it, e.g. async function load() { ... }; load();.

What is the cleanup flag / AbortController for?

If the component unmounts or the request changes before the fetch resolves, you must not call setState on the old result. A boolean 'ignore' flag (or an AbortController) lets the cleanup function cancel the stale update and avoid a warning or a race condition.

Should I really fetch with useEffect in production apps?

It works and is great for learning, but real apps usually use a data library like React Query or SWR for caching, retries, and dedup. The useEffect pattern here is the foundation those libraries build on.