React Fetch API using useEffect Hook (Step-by-Step Example)

📌 INTRODUCTION

In modern web applications, data is usually fetched from external APIs. React provides the useEffect hook to handle such side effects.

In this program, we will:

• Fetch data from an API
• Store it using useState
• Display it dynamically

👉 This is a must-know concept for projects and placements.

---

📘 PROBLEM STATEMENT

👉 Write a program to fetch and display data from an API using the useEffect hook in React.

---

💡 CONCEPTS USED

• useEffect Hook
• useState Hook
• Fetch API
• Asynchronous Programming

---

🧠 LOGIC EXPLANATION

1. Create state to store data
2. Use useEffect() to call API
3. Fetch data using fetch()
4. Store response in state
5. Display data using map()

---

💻 PROGRAM CODE

Open src/App.js:

import { useEffect, useState } from "react";

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h1>User List</h1>

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

export default App;

---

🖥️ OUTPUT

User List

Leanne Graham - leanne@example.com
Ervin Howell - ervin@example.com
...

---

🔍 STEP-BY-STEP EXPLANATION

• useState([]) → stores API data
• useEffect(() => {}, []) → runs once on load
• fetch() → retrieves data from API
• setUsers(data) → updates state
• map() → displays list

---

⚡ USING ASYNC/AWAIT (MODERN WAY)

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await response.json();
    setUsers(data);
  };

  fetchData();
}, []);

---

⚠️ IMPORTANT POINT

👉 Empty dependency array [] ensures:

• API is called only once
• Prevents infinite loops

---

🎯 WHY useEffect IS IMPORTANT

• Handles side effects (API calls, timers, etc.)
• Runs after component renders
• Core concept for React projects

---

🌟 ADVANCED FEATURES

1. Loading State

const [loading, setLoading] = useState(true);

---

2. Error Handling

.catch(error => console.log(error));

---

3. Display Data in Cards

👉 Combine with Product/User components

---

📚 REAL-WORLD USE CASE

• Fetching user data
• Displaying products
• Dashboard APIs
• Live data applications

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is useEffect?

👉 A React hook used to handle side effects.

---

Q2. What is Fetch API?

👉 A method to request data from servers.

---

Q3. Why use empty dependency array?

👉 To run effect only once.

---

Q4. What is async/await?

👉 A cleaner way to handle asynchronous code.

---

Q5. What happens if dependency array is missing?

👉 Effect runs on every render.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React User Profiles – Program 13
👉 React List Rendering – Program 7
👉 React Props – Program 10

---

📌 CONCLUSION

Fetching data using useEffect is one of the most essential skills in React.

👉 Master this to build real-world applications like dashboards, e-commerce sites, and APIs.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites