Fetch API — Complete Guide
Fetch API — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.
On this page
React.js Tutorial · Lesson 36 of 100
Fetch API
Beginner ✓ → Intermediate → Advanced → Professional
Intermediate · 2 — Build apps · ~14 min read · Module 4: Routing & Data
Introduction
You know the basics now. Here we use Fetch API in real app situations — forms, pages, and data. Still plain language, just a bit more depth. fetch sends HTTP requests from the browser. It returns a Promise. You call .json() on the response to parse JSON data. Almost every React app loads or saves data. fetch is built in — no install needed.
Routing is how a single React app feels like many pages. Users expect URLs like /cart and /checkout — Router makes that work.
When will you use this?
Add routing when your app has more than one screen and URLs should be bookmarkable.
- Multi-page apps like dashboards use React Router — /settings, /profile, /orders.
- E-commerce sites route /product/123 to a product detail component.
Real-world: load My Courses on Toolliyo
Student dashboard calls GET /api/enrollments on mount — native fetch, no extra library for simple JSON reads.
Production-style code
function MyCourses() {
const [courses, setCourses] = useState([]);
const [status, setStatus] = useState('loading');
useEffect(() => {
fetch('/api/enrollments', { credentials: 'include' })
.then(r => {
if (!r.ok) throw new Error(r.statusText);
return r.json();
})
.then(data => { setCourses(data); setStatus('ready'); })
.catch(() => setStatus('error'));
}, []);
if (status === 'loading') return <p>Loading courses…</p>;
if (status === 'error') return <p>Could not load courses.</p>;
return <CourseList courses={courses} />;
}What happens in production: fetch is built into browsers — perfect for read-heavy LMS and catalog screens before adding axios interceptors.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
useEffect(() => {
let cancelled = false;
fetch('/api/products')
.then(res => {
if (!res.ok) throw new Error('Failed to load');
return res.json();
})
.then(data => { if (!cancelled) setProducts(data); })
.catch(err => setError(err.message));
return () => { cancelled = true; };
}, []);Line-by-line walkthrough
| Code | What it means |
|---|---|
useEffect(() => { | Runs side effects — fetch data, timers, or subscriptions — after the screen updates. |
let cancelled = false; | Part of the Fetch API example — read it together with the lines before and after. |
fetch('/api/products') | Calls an API to load or save data from a server. |
.then(res => { | Defines a function — often a component or event handler. |
if (!res.ok) throw new Error('Failed to load'); | Part of the Fetch API example — read it together with the lines before and after. |
return res.json(); | Sends UI or a value back to whoever called this function. |
}) | Closes a block started by { or ( above. |
.then(data => { if (!cancelled) setProducts(data); }) | Defines a function — often a component or event handler. |
.catch(err => setError(err.message)); | Defines a function — often a component or event handler. |
return () => { cancelled = true; }; | Returns JSX — the HTML-like UI this component displays. |
}, []); | Closes a block started by { or ( above. |
How it works (big picture)
- res.ok is false for 404/500.
- cancelled flag avoids setting state after unmount.
- cleanup prevents memory leak warnings.
Do this on your computer
- fetch URL in useEffect or click handler.
- Check res.ok before parsing.
- Add loading and error UI states.
- Read the real-world section and name which part of the app uses this topic.
- Run the example locally and confirm the same behavior in the browser.
- Change one value in the example (text, initial state, or URL) and predict what will happen before you save.
Experiments — try changing this
- Change text or labels in the example and save — watch the browser update.
- Break the code on purpose (remove a bracket), read the error message, then fix it.
- Open React DevTools (browser extension) while running Fetch API and inspect component props/state.
Remember
fetch → then json → setState. Handle errors and loading. Use cleanup or AbortController in effects.
Common questions
fetch vs axios?
fetch is built-in; axios adds interceptors and nicer defaults.
How long should I spend on Fetch API?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.
What if I get stuck on Fetch API?
Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is Fetch API used in real jobs?
See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
