Fetching Data and API Integration in React

Most real applications need to load data from a server rather than hardcoding it. In a function component, this is done inside a useEffect hook, since fetching data is a side effect that shouldn't happen during rendering itself. The two most common tools for making the request are the browser's built-in fetch API and the popular third-party library axios.

Beyond just calling an API, a properly integrated data-fetching component also needs to manage three distinct states: loading (the request is in flight), success (data arrived), and error (the request failed) — and render appropriate UI for each.

Why it matters

Almost every React application gets its data from an API, and doing that well means handling three states, not one: loading, success and failure. Skipping the loading or error state gives a blank screen when the network is slow or the server fails, which is exactly when users most need feedback.

Fetching Data with useEffect

The fetch call is placed inside a useEffect with an appropriate dependency array — an empty array ([]) means "run once, after the first render," while including a value like userId means "re-run whenever userId changes." Inside the effect, you typically set a loading flag to true, perform the request, then update state with the result or the error, and finally set loading back to false.

Managing Loading and Error State

A robust data-fetching component keeps at least three pieces of state: the data itself (initially null or an empty value), a loading boolean (initially true), and an error value (initially null). The component's JSX then branches on these: show a spinner or "Loading..." message while loading is true, show an error message if error is set, and otherwise render the data.

• const [data, setData] = useState(null);
• const [loading, setLoading] = useState(true);
• const [error, setError] = useState(null);

Cleanup and Avoiding Race Conditions

If a component can unmount or its dependencies can change before a request finishes, setting state after that point can trigger warnings or bugs. The standard fix is to track whether the effect is still "current" — either with an AbortController (works with fetch) to cancel the in-flight request, or a boolean flag checked before calling setState in the effect's cleanup function.

Examples

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function loadUsers() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users', {
          signal: controller.signal,
        });
        if (!response.ok) {
          throw new Error(`Request failed with status ${response.status}`);
        }
        const json = await response.json();
        setUsers(json);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }

    loadUsers();
    return () => controller.abort(); // cancel if the component unmounts first
  }, []);

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

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

Initially renders "Loading users...". Once the fetch resolves, it renders a bulleted list of user names from the API; if the request fails (network error or non-2xx status), it renders "Error: <message>" instead of the list.

import { useEffect, useState } from 'react';
import axios from 'axios';

function PostDetails({ postId }) {
  const [post, setPost] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;
    axios
      .get(`https://jsonplaceholder.typicode.com/posts/${postId}`)
      .then((response) => {
        if (isMounted) setPost(response.data);
      })
      .catch((err) => {
        if (isMounted) setError(err.message);
      });
    return () => {
      isMounted = false;
    };
  }, [postId]);

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

  return <h2>{post.title}</h2>;
}

export default PostDetails;

Shows "Loading post..." then replaces it with the post title once axios resolves. If postId changes, the effect re-runs and fetches the new post; the isMounted flag prevents a state update if the component unmounted first.

Exercise

Do this in src/App.jsx of a Vite + React project. Fetch the list of users from https://jsonplaceholder.typicode.com/users when the component mounts. Show "Loading" while waiting, an error message if the request fails or returns a bad status, and otherwise the users' names in a list. Cancel the request if the component is removed.

Expected result: "Loading" appears briefly, then a list of ten names. With the network turned off, an error message is shown instead.

import { useEffect, useState } from "react";

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // TODO: fetch the users with an AbortController, check response.ok,
    //       store the result or the error, and clear the loading flag
    // TODO: return a clean-up that aborts the request
  }, []);

  // TODO: render the loading state, the error state, or the list
  return null;
}

import { useEffect, useState } from "react";

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch("https://jsonplaceholder.typicode.com/users", { signal: controller.signal })
      .then((response) => {
        if (!response.ok) {
          throw new Error("Request failed with status " + response.status);
        }
        return response.json();
      })
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch((problem) => {
        if (problem.name === "AbortError") return;
        setError(problem.message);
        setLoading(false);
      });

    return () => controller.abort();
  }, []);

  if (loading) return <p>Loading</p>;
  if (error) return <p>Something went wrong: {error}</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Quick quiz

Interview questions