Fetching Data in React

Almost every app loads data from a server. In a client-side React app the basic tool is fetch inside useEffect. It looks simple, but a production-quality version has to handle loading, errors, changing inputs and responses that arrive out of order. This lesson builds that version step by step.

The basic pattern

Here's the real code you'd write against an API:

import { useEffect, useState } from "react";

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [status, setStatus] = useState("loading");   // "loading" | "success" | "error"
  const [error, setError] = useState(null);

  useEffect(() => {
    async function load() {                         // effects can't be async, so define one inside
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        if (!res.ok) throw new Error(`HTTP ${res.status}`);   // fetch doesn't throw on 404/500
        setUsers(await res.json());
        setStatus("success");
      } catch (err) {
        setError(err.message);
        setStatus("error");
      }
    }
    load();
  }, []);

  if (status === "loading") return <p>Loading users…</p>;
  if (status === "error") return <p role="alert">Couldn't load users: {error}</p>;
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

Running it

So the examples below run anywhere, they use a small fake API with a delay instead of a real server. The React code is exactly what you'd write with fetch.

import { useEffect, useState } from "react";

// fake API: resolves after 300 ms, fails for an unknown category
const db = { frontend: ["React.js", "Next.js", "TypeScript"], backend: ["Node.js", "SQL"] };
function fetchCourses(category) {
  return new Promise((resolve, reject) =>
    setTimeout(() => (db[category] ? resolve(db[category]) : reject(new Error("404 Not Found"))), 300)
  );
}

function CourseList({ category }) {
  const [courses, setCourses] = useState([]);
  const [status, setStatus] = useState("loading");
  const [error, setError] = useState(null);

  useEffect(() => {
    setStatus("loading");
    fetchCourses(category)
      .then((data) => { setCourses(data); setStatus("success"); })
      .catch((err) => { setError(err.message); setStatus("error"); });
  }, [category]);                                   // refetch when the category changes

  if (status === "loading") return <p>Loading {category}…</p>;
  if (status === "error") return <p role="alert">Error: {error}</p>;
  return <ul>{courses.map((c) => <li key={c}>{c}</li>)}</ul>;
}

export default function App() {
  const [category, setCategory] = useState("frontend");
  return (
    <div>
      <button onClick={() => setCategory("frontend")}>Frontend</button>
      <button onClick={() => setCategory("backend")}>Backend</button>
      <button onClick={() => setCategory("devops")}>DevOps</button>
      <CourseList category={category} />
    </div>
  );
}

[Frontend] [Backend] [DevOps]
Loading frontend…

› wait 350ms
[Frontend] [Backend] [DevOps]
• React.js
• Next.js
• TypeScript

› click “Backend”
[Frontend] [Backend] [DevOps]
Loading backend…

› wait 350ms
[Frontend] [Backend] [DevOps]
• Node.js
• SQL

› click “DevOps”
[Frontend] [Backend] [DevOps]
Loading devops…

› wait 350ms
[Frontend] [Backend] [DevOps]
Error: 404 Not Found

The race condition

Responses don't always arrive in the order requests were sent. In this search, slow queries take longer – type "react" quickly and the response for an earlier keystroke can land last:

import { useEffect, useState } from "react";

const all = ["react", "react router", "redux", "remix", "rust"];
function searchApi(q) {
  const delay = 500 - q.length * 80;               // shorter queries are slower here
  return new Promise((r) => setTimeout(() => r(all.filter((x) => x.startsWith(q))), delay));
}

export default function App() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) return;
    searchApi(query).then((data) => setResults(data));   // ✗ no protection against stale responses
  }, [query]);

  return (
    <div>
      <input aria-label="Search" value={query} onChange={(e) => setQuery(e.target.value)} />
      <p>Results for "{query}": {results.join(", ")}</p>
    </div>
  );
}

[]
Results for "":

› type “reac” into Search
[reac]
Results for "reac":

› wait 600ms
[reac]
Results for "reac": react, react router, redux, remix, rust

The box says "reac", but the results include "redux", "remix" and "rust". The slow response for the first keystroke, "r", arrived after the one for "reac" and overwrote it.

Fix 1: ignore stale responses in the cleanup

import { useEffect, useState } from "react";

const all = ["react", "react router", "redux", "remix", "rust"];
function searchApi(q) {
  const delay = 500 - q.length * 80;
  return new Promise((r) => setTimeout(() => r(all.filter((x) => x.startsWith(q))), delay));
}

export default function App() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) return;
    let ignore = false;                             // belongs to this run of the effect
    searchApi(query).then((data) => {
      if (!ignore) setResults(data);                // only the latest run may update state
    });
    return () => { ignore = true; };                // a newer query (or unmount) cancels this run
  }, [query]);

  return (
    <div>
      <input aria-label="Search" value={query} onChange={(e) => setQuery(e.target.value)} />
      <p>Results for "{query}": {results.join(", ")}</p>
    </div>
  );
}

[]
Results for "":

› type “reac” into Search
[reac]
Results for "reac":

› wait 600ms
[reac]
Results for "reac": react, react router

Fix 2: cancel the request with AbortController

With real fetch, you can actually cancel the HTTP request, which also saves bandwidth:

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
    .then((res) => res.json())
    .then(setResults)
    .catch((err) => {
      if (err.name !== "AbortError") setError(err.message);   // aborting isn't a real error
    });
  return () => controller.abort();                            // cancel when query changes or on unmount
}, [query]);

Beyond useEffect

Hand-written fetching has no caching, no retry, no deduplication and no background refresh. In production apps, teams usually use one of these:

// The same list with TanStack Query
import { useQuery } from "@tanstack/react-query";

function CourseList({ category }) {
  const { data = [], isPending, error } = useQuery({
    queryKey: ["courses", category],                          // cached per category
    queryFn: () => fetch(`/api/courses?c=${category}`).then((r) => r.json()),
  });
  if (isPending) return <p>Loading…</p>;
  if (error) return <p role="alert">{error.message}</p>;
  return <ul>{data.map((c) => <li key={c.id}>{c.title}</li>)}</ul>;
}

Practice

Summary