Understanding React's useEffect for Fetching API Data with Promises

In React development, one of the challenges many developers encounter is managing side effects, particularly when fetching API data. The 

 hook plays a pivotal role here, allowing us to synchronize our component's lifecycle with external data. In this post, we'll illuminate how to effectively use 

 to fetch API data with promises, making your React applications more dynamic and responsive.

 is a hook that lets you perform side effects in functional components. Side effects could include things like:

In our case, fetching data from an API is a common use case. Let's break down how we can achieve this using 

Imagine you're building a component that displays a list of users from an API. First, you'll need a functional component that utilizes 

 to perform the API call when the component mounts.

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

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

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error('Network response was not okay');
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []); // Runs only once on component mount

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

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

export default UserList;

If you find yourself needing to fetch data from multiple APIs within the same component, eager not to block your UI, 

useEffect(() => {
  const fetchUsersAndPosts = async () => {
    try {
      const [usersResponse, postsResponse] = await Promise.all([
        fetch('https://jsonplaceholder.typicode.com/users'),
        fetch('https://jsonplaceholder.typicode.com/posts')
      ]);

      if (!usersResponse.ok || !postsResponse.ok) {
        throw new Error('One or more requests failed');
      }

      const [usersData, postsData] = await Promise.all([
        usersResponse.json(),
        postsResponse.json()
      ]);

      setUsers(usersData);
      // Similarly, set posts data if needed
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchUsersAndPosts();
}, []);

Callout: Best Practices for using useEffect

 to fetch API data with promises in React is a powerful way to enrich your application's interactivity. It allows you to handle asynchronous operations smoothly while maintaining the clarity of your component's lifecycle. As you continue to develop with React, effective use of hooks—notably 

—will undoubtedly pay off in building robust applications.

CONTRIBUTOR

Nate Murray

AUTHOR

Richard Oliver Bray

In React development, one of the challenges many developers encounter is managing side effects, particularly when fetching API data. The useEffect hook plays a pivotal role here, allowing us to synchronize our component's lifecycle with external data. In this post, we'll illuminate how to…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Understanding React's useEffect for Fetching API Data with Promises

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript