mediumFrontend

How do you fetch data in React?

Q: How do you fetch data in React?

**Core concept (TL;DR).** The basic approach is to fetch inside useEffect and track **loading / error / data** state, with cleanup to avoid race conditions. For anything real, prefer a **data library** (React Query / SWR) that adds caching, deduping, and revalidation — or a framework's data loaders. React 19's use() can unwrap a promise directly with Suspense. Track loading / error / data; prefer a cache loading<

814 views

Understand the problem

A very common task in modern web applications.

data fetchinguseEffectapiasynchronous

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Manual fetch with loading/error/race guard

import { useState, useEffect } from "react";

export default function App() {
  const [state, setState] = useState({ loading: true, error: null, data: null });

  useEffect(() => {
    let ignore = false;
    fetch("https://api.example.com/user/1")
      .then((res) => { if (!res.ok) throw new Error("HTTP " + res.status); return res.json(); })
      .then((data) => { if (!ignore) setState({ loading: false, error: null, data }); })
      .catch((error) => { if (!ignore) setState({ loading: false, error, data: null }); });
    return () => { ignore = true; };   // discard stale response
  }, []);

  if (state.loading) return <p>Loading…</p>;
  if (state.error) return <p>Error: {state.error.message}</p>;
  return <pre style={{ fontFamily: "system-ui" }}>{JSON.stringify(state.data, null, 2)}</pre>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are React custom hooks and when should you use them?

What is the difference between controlled and uncontrolled components?