Fetch Data with Loading & Error States

import { useState, useEffect } from "react";

function UsersList() {
  const [users, setUsers] = useState([]);
  const [status, setStatus] = useState("idle"); // idle | loading | error | success
  const [error, setError] = useState("");

  useEffect(() => {
    async function load() {
      setStatus("loading");
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        if (!res.ok) throw new Error("Failed to load");
        const data = await res.json();
        setUsers(data);
        setStatus("success");
      } catch (err) {
        setError(err.message || "Unknown error");
        setStatus("error");
      }
    }
    load();
  }, []);

  if (status === "loading") return <p>Loading...</p>;
  if (status === "error") return <p>Error: {error}</p>;

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}