Mission 2: Loading & Error State

เป้าหมายของ Mission นี้: จัดการ Loading State และ Error State ระหว่างเรียก API

3 สถานะที่ต้องมีเสมอ

stateDiagram-v2
    [*] --> Loading: เริ่ม fetch
    Loading --> Success: โหลดสำเร็จ
    Loading --> Error: โหลดพัง
    Success --> [*]
    Error --> [*]

ทำไมต้องมี Loading State

การดึงข้อมูลใช้เวลา (แม้จะแค่เสี้ยววินาที) — ถ้าไม่โชว์อะไรเลย ผู้ใช้จะคิดว่าเว็บค้าง ต้องมี state บอกว่า "กำลังโหลดอยู่นะ"

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

ทำไมต้องมี Error State

เน็ตอาจหลุด หรือ API อาจพังได้เสมอ — ต้องดักจับด้วย try/catch แล้วเก็บ error ไว้ใน state

"use client";
import { useState, useEffect } from "react";

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

  useEffect(() => {
    async function loadPosts() {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        setPosts(data);
      } catch (err) {
        setError("โหลดข้อมูลไม่สำเร็จ");
      } finally {
        setLoading(false);
      }
    }
    loadPosts();
  }, []);

  if (loading) return <p>กำลังโหลด...</p>;
  if (error) return <p>{error}</p>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

คำศัพท์สำคัญ