Fetch API

Introduction

Almost every real application needs to load data from somewhere other than its own local state — a list of products, a user's profile, search results. The browser's built-in fetch() function is the most basic tool for making these network requests, and it needs no extra installation.

This lesson focuses on the pattern for using fetch() correctly inside a React component: firing the request when the component mounts, tracking whether it is loading or has failed, and cleaning up properly so you never try to update an unmounted component.

What is the Fetch API?

fetch() is a function built into every modern browser (no import needed) for making HTTP requests. It returns a Promise that resolves to a Response object once the server responds, and you typically call .json() on that response to parse the body as JSON — which itself returns another Promise.

fetch("https://api.example.com/users/1")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

Fetching Data Inside useEffect

To load data when a component first appears on screen, you call fetch() inside a useEffect with an empty dependency array, so it runs exactly once when the component mounts. The fetched data is stored in state so the component re-renders once it arrives.

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]);

  if (!user) return <p>Loading...</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

Jane Doe
jane@example.com

Tracking Loading and Error State

A single data variable is not enough for a good user experience — you also need to know whether the request is still in flight, and whether it failed, so you can show an appropriate spinner or error message.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(`https://api.example.com/users/${userId}`)
      .then((res) => {
        if (!res.ok) throw new Error("Failed to fetch user");
        return res.json();
      })
      .then((data) => setUser(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

Loading...

(or, on failure)
Error: Failed to fetch user

(or, on success)
Jane Doe
jane@example.com

Avoiding State Updates After Unmount

A fetch request can still be in flight when a component unmounts — for example, if the user quickly navigates away. If the request resolves later and tries to call setState on a component that no longer exists, React logs a warning, and in more complex cases it can lead to subtle bugs.

The standard fix is a cleanup flag: a local boolean tracked with useEffect's cleanup function, checked before each state update.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isActive = true; // cleanup flag

    setLoading(true);
    setError(null);

    fetch(`https://api.example.com/users/${userId}`)
      .then((res) => {
        if (!res.ok) throw new Error("Failed to fetch user");
        return res.json();
      })
      .then((data) => {
        if (isActive) setUser(data);
      })
      .catch((err) => {
        if (isActive) setError(err.message);
      })
      .finally(() => {
        if (isActive) setLoading(false);
      });

    return () => {
      isActive = false; // component unmounted or userId changed again
    };
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

The Fetch API gives you a straightforward, dependency-free way to load data into a component, as long as you pair it with useEffect, careful loading/error state, and a cleanup flag to guard against updates after unmount. These patterns form the foundation for every data-fetching approach you will use in React.

Next, you will look at Axios, a popular third-party library that streamlines many of these same steps.