Leveraging useEffect in React for Data Fetching: A Guide to Building a PostList Component

Published by : Code Crafts Campus
April 12, 2024

Leveraging useEffect in React for Data Fetching: A Guide to Building a PostList Component

React’s `useEffect` hook is a powerful tool for performing side effects in functional components, such as data fetching, subscriptions, and manually triggering DOM updates. In this tutorial, we’ll explore how to use `useEffect` to fetch data from an API and display it in a `PostList` component. We’ll also cover managing the loading state and handling errors, which are crucial for building reliable web applications.

Prerequisites

Before starting, ensure you have the following:

A basic React project setup (using `create-react-app` is recommended).
Basic understanding of React, JavaScript, and asynchronous programming.

Step 1: Setting Up the PostList Component

Our `PostList` component will fetch posts from the JSONPlaceholder API (a free fake online REST API) and display them. Here’s how to set it up:

Creating the Component

Create a New File: In your project’s `src folder`, create a new file named `PostList.js`.
Add the Basic Structure:

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

function PostList() {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                setPosts(data);
                setLoading(false);
            })
            .catch(error => {
                setError(error.message);
                setLoading(false);
            });
    }, []); // Empty dependency array means this effect runs once after the initial render

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

    return (
        <div>
            <h1>Posts</h1>
            {posts.map(post => (
                <div key={post.id}>
                    <h3>{post.title}</h3>
                    <p>{post.body}</p>
                </div>
            ))}
        </div>
    );
}

export default PostList;

Understanding the Code

useState Hooks: We use three state hooks for storing the posts, managing the loading state, and handling errors.
useEffect Hook: This is where we perform the data fetching. The effect runs once after the initial render (as indicated by the empty dependency array `[ ]`). It fetches posts from the API, updates the state accordingly, and handles any errors that might occur.
Loading and Error States: The component conditionally renders either a loading indicator or an error message based on the state.

Step 2: Using the PostList Component

To display the `PostList` component, import it into your `App.js` or wherever you wish to use it:

				
					import React from 'react';
import PostList from './PostList';

function App() {
    return (
        <div className="App">
            <PostList />
        </div>
    );
}

export default App;

Leveraging useEffect in React for Data Fetching: A Guide to Building a PostList Component