Why Fetch Data from an API?

FROM STATIC TO DYNAMIC APPLICATIONS

🎯 A SIMPLE ANALOGY

You order a pizza 🍕 (fetch data). The delivery person drives to the restaurant (API call). You wait at the door (loading state). If the pizza arrives, you eat (success). If the driver gets lost, you get a call saying sorry (error). Without these steps, you'd just stand there confused. That's why we show loading indicators and error messages!

How to Fetch Data  Step by Step

fetch() · useEffect() · useState() for loading, error, data

📜 CODE — Full Learning Feed Component (with detailed comments)

// ============================================
// Webbo3 Learning Feed — Fetches live blog posts
// ============================================

import { useState, useEffect } from "react";

function App() {
  // State for the posts we fetch (initially empty array)
  const [posts, setPosts] = useState([]);
  
  // Loading state — true while fetching, false when done
  const [loading, setLoading] = useState(true);
  
  // Error state — null means no error, otherwise an error message
  const [error, setError] = useState(null);

  // This effect runs once when the component first appears
  useEffect(() => {
    // We need to define an async function inside (useEffect itself cannot be async)
    const fetchPosts = async () => {
      try {
        // Go to the internet and ask for data
        const response = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=8");
        
        // If response is not OK (e.g., 404 Not Found, 500 Server Error), throw an error
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        // Convert the response from JSON format to a JavaScript array
        const data = await response.json();
        
        // Save the posts to state
        setPosts(data);
        
        // Turn off loading — we have the data now
        setLoading(false);
      } catch (err) {
        // Something went wrong — save the error message
        setError(err.message);
        setLoading(false);
      }
    };

    // Call the fetch function
    fetchPosts();
  }, []); // Empty array = run only once when component mounts

  // While loading, show this
  if (loading) {
    return 
Loading Webbo3 articles...;
  }
  
  // If there's an error, show error message
  if (error) {
    return 
Error: {error};
  }

  // Success! Show the list of posts
  return (
    <div style={{ padding: "40px" }}>
      <h1>Webbo3 Learning Feedh1>
      {posts.map(post => (
        <div key={post.id} style={{
          border: "1px solid #ccc",
          padding: "15px",
          marginBottom: "10px",
          borderRadius: "8px"
        }}>
          <h3>{post.title}h3>
          <p>{post.body}p>
        div>
      ))}
    div>
  );
}

export default App;
    

🎯 Live Simulation — See Exactly How It Works

✨ After 1.5 seconds (simulating network delay), the articles appear. This is exactly what your React app will do!

Making It Reusable — The useFetch Hook

DON'T REPEAT YOURSELF

// ============================================
// useFetch.js — A custom hook for any API call
// ============================================

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`Status ${res.status}`);
        const json = await res.json();
        setData(json);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]); // Re-run if the URL changes

  return { data, loading, error };
}

export default useFetch;

// ============================================
// Usage in any component becomes super clean!
// ============================================

import useFetch from "./useFetch";

function App() {
  const { data: posts, loading, error } = useFetch("https://jsonplaceholder.typicode.com/posts?_limit=8");
  
  if (loading) return 
Loading...;
  if (error) return 
Error: {error};
  return (
    <div>
      {posts.map(post => <PostCard key={post.id} title={post.title} body={post.body} />)}
    div>
  );
}
    

🤗 YOUR KIND AI ASSISTANT — ALWAYS HERE

💬 "My data shows up, then disappears!" → You might be resetting loading inside the effect incorrectly. Check your dependencies array.

💬 "I get a CORS error" → That means the API doesn't allow requests from your domain. For learning, use JSONPlaceholder (it allows all). For real APIs, you may need a backend proxy.

💬 "How do I POST data (send data to server)?" → Great question! You'll use fetch with method: "POST" and body: JSON.stringify(data). We'll cover that next week!

You made it through Day 24! Data fetching is a superpower — now you can connect your React apps to the entire internet. Celebrate every small win. You're doing amazing! 🎉