How do you interact with external APIs in React?

import { useState, useEffect, useCallback } from "react";

// ── LAYER 1: the API client. Everything about transport lives here. ────────
class ApiError extends Error {
  constructor(message, status, body) {
    super(message);
    this.name = "ApiError";
    this.status = status;
    this.body = body;
  }
}

const BASE_URL = "/api";                 // one place per environment
let authToken = "demo-token-123";        // set at sign-in, not per component

async function apiRequest(path, { signal, timeoutMs = 8000, ...options } = {}) {
  // fetch has no timeout of its own, so compose one with AbortController.
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);
  signal?.addEventListener("abort", () => controller.abort());

  try {
    const res = await fetch(BASE_URL + path, {
      ...options,
      signal: controller.signal,
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + authToken,
        ...options.headers,
      },
    });

    // THE GOTCHA: fetch resolves on 404 and 500. Without this check the error
    // page gets parsed and rendered as if it were valid data.
    if (!res.ok) {
      const body = await res.text().catch(() => "");
      throw new ApiError("Request failed with " + res.status, res.status, body);
    }
    return await res.json();
  } finally {
    clearTimeout(timer);
  }
}

// The typed surface components actually use — no URLs escape this module.
const api = {
  getUser: (id, opts) => apiRequest("/users/" + id, opts),
};

// ── LAYER 2: a hook giving components React-shaped state. ──────────────────
function useUser(id) {
  const [state, setState] = useState({ status: "idle", data: null, error: null });

  const load = useCallback((signal) => {
    setState({ status: "loading", data: null, error: null });
    api.getUser(id, { signal })
      .then((data) => setState({ status: "success", data, error: null }))
      .catch((e) => {
        if (e.name === "AbortError") return;      // deliberate, not a failure
        setState({ status: "error", data: null, error: e });
      });
  }, [id]);

  useEffect(() => {
    const c = new AbortController();
    load(c.signal);
    return () => c.abort();
  }, [load]);

  return { ...state, retry: () => load() };
}

// ── LAYER 3: the component. Knows nothing about HTTP. ─────────────────────
export default function App() {
  const [id, setId] = useState(1);
  const { status, data, error, retry } = useUser(id);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6 }}>
      <p>
        {[1, 2].map((n) => (
          <button key={n} onClick={() => setId(n)} style={{ marginRight: 6 }}>user {n}</button>
        ))}
      </p>

      {status === "loading" && <p>loading…</p>}

      {status === "error" && (
        <div style={{ border: "1px solid crimson", borderRadius: 6, padding: 10 }}>
          {/* A normalised error means one predictable shape to branch on. */}
          <strong style={{ color: "crimson" }}>
            {error.status === 404 ? "That user does not exist." :
             error.status >= 500 ? "The server had a problem." :
             "Could not reach the server."}
          </strong>
          <p style={{ fontSize: 12, color: "#666", margin: "6px 0" }}>
            {error.name}: {error.message}
          </p>
          <button onClick={retry}>retry</button>
        </div>
      )}

      {status === "success" && <p>{JSON.stringify(data)}</p>}

      <p style={{ color: "#666", fontSize: 13 }}>
        This playground has no /api route, so every request fails — which is the
        point: the error is normalised into an ApiError with a status, and the
        component branches on that rather than on transport details.
      </p>
    </div>
  );
}