Chapter 9: Fetching Data

Welcome back to our React series, "React Revolution"! Now that we’ve covered styling and navigation, it’s time to dive into fetching data. In this chapter, we’ll explore how to retrieve data from APIs and display it in our React components. Fetching data is an essential skill for any web developer, and I promise we’ll make it simple and fun!

9.1 Why Fetch Data?

Fetching data allows your application to interact with external resources, such as APIs, databases, or other services. By doing so, you can create dynamic, real-time applications that respond to user inputs and external changes.

9.2 Getting Started

In this chapter, we’ll use the fetch API, which is built into modern browsers and provides a simple way to make network requests. We’ll also cover how to handle asynchronous operations using React Hooks.

9.3 Setting Up

First, make sure you have a React app set up. If you don’t have one yet, you can quickly create one using Create React App:

npx create-react-app data-fetching-app
cd data-fetching-app
npm start

9.4 Basic Fetch Request

Let’s start with a basic example of fetching data from an API. We’ll use the JSONPlaceholder API, a free fake online REST API for testing and prototyping.

Create a Fetch Component:

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

function FetchComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchComponent;

In this example:

We use useState to manage the state of our data and loading status.
The useEffect hook allows us to fetch data when the component mounts.
We make a fetch request to the API, then parse the response as JSON.
The data is stored in the data state, and the loading state is updated accordingly.
We handle errors by logging them and updating the loading state.

9.5 Displaying the Data

The fetched data is displayed as a list of titles. While the data is being fetched, a loading message is shown. Once the data is retrieved, the loading message is replaced by the data.

9.6 Handling Errors

It’s essential to handle errors gracefully. In the example above, if an error occurs during the fetch request, it is caught and logged, and the loading state is set to false to stop the loading message.

9.7 Using Async/Await

Using async and await can make your code cleaner and easier to read. Here’s how to refactor the fetch request using async/await:

Refactor with Async/Await:

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

function FetchComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchComponent;