Frontend Engineering | VoidX Academy

32. API Calls in React

Connecting to the Real World

Your React components will rarely rely on hardcoded data. They need to fetch user profiles, product lists, or news articles from a backend server. Fetching data is a Side Effect, which means it must be strictly managed inside the useEffect hook to prevent infinite re-rendering loops.

The Standard Fetch Pattern

Because network requests take time, you must manage three distinct states in your UI: Loading, Success, and Error. If you don't track loading state, the user will stare at a blank screen.

import { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // We define the async function inside the effect
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) throw new Error("Failed to fetch");
        
        const data = await response.json();
        setUsers(data); // Success: Save the data
      } catch (err) {
        setError(err.message); // Error: Save the error message
      } finally {
        setIsLoading(false); // Done: Stop the loading spinner
      }
    };

    fetchUsers(); // Execute the function
  }, []); // Empty array ensures this only runs ONCE on mount

  // Conditional UI rendering based on the states
  if (isLoading) 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>
  );
}

Why Define the Async Function Inside?

You cannot make the useEffect callback itself async (e.g., useEffect(async () => {...})). React requires effects to return either nothing or a cleanup function. Async functions return Promises, which breaks React. The standard pattern is to define the async function inside the effect, and then immediately call it.

32. API Calls in React

Connecting to the Real World

The Standard Fetch Pattern

Because network requests take time, you must manage three distinct states in your UI: Loading, Success, and Error. If you don't track loading state, the user will stare at a blank screen.

import { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // We define the async function inside the effect
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) throw new Error("Failed to fetch");
        
        const data = await response.json();
        setUsers(data); // Success: Save the data
      } catch (err) {
        setError(err.message); // Error: Save the error message
      } finally {
        setIsLoading(false); // Done: Stop the loading spinner
      }
    };

    fetchUsers(); // Execute the function
  }, []); // Empty array ensures this only runs ONCE on mount

  // Conditional UI rendering based on the states
  if (isLoading) 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>
  );
}

32. API Calls in React

Connecting to the Real World

The Standard Fetch Pattern

Why Define the Async Function Inside?

Knowledge Check

32. API Calls in React

Connecting to the Real World

The Standard Fetch Pattern

Why Define the Async Function Inside?

Knowledge Check