فراخوانی API با useEffect در React – آموزش fetch و نمایش داده

یکی از رایج‌ترین Side Effectها در React، دریافت داده از API است. ترکیب useEffect + fetch + useState الگوی استاندارد برای بارگذاری داده از سرور و نمایش آن در UI است.

الگوی کلی

1. state برای نگهداری داده (مثلاً آرایه کاربران)
2. useEffect با [] برای fetch یک بار بعد از mount
3. setState با نتیجه JSON
4. نمایش loading تا رسیدن داده
5. رندر لیست با map

مثال کامل: لیست کاربران

import { useState, useEffect } from "react";

export default function UserList() {
  const [users, setUsers] = useState([]);

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

  if (users.length === 0) {
    return <h1>در حال بارگذاری کاربران...</h1>;
  }

  return (
    <div>
      <h1>لیست کاربران</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  );
}

توضیح گام‌به‌گام

۱. state خالی

const [users, setUsers] = useState([]);

شروع با آرایه خالی؛ UI ابتدا حالت loading نشان می‌دهد.

۲. fetch در useEffect

useEffect(() => { ... }, []);

[] یعنی فقط یک بار بعد از mount — از درخواست تکراری با هر رندر جلوگیری می‌کند.

۳. تبدیل پاسخ به JSON

.then((response) => response.json())
.then((data) => setUsers(data))

بعد از دریافت، state به‌روز و کامپوننت دوباره رندر می‌شود.

۴. مدیریت خطا

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

در پروژه واقعی state جدا برای error و loading تعریف کنید.

بهبودهای پیشنهادی

جمع‌بندی

فراخوانی API با useEffect پایه هر اپ React متصل به backend است. داده را در state نگه دارید، fetch را فقط یک بار (یا با dependency مشخص) اجرا کنید و نتیجه را با map در JSX نشان دهید. با اضافه کردن loading و error handling، این الگو برای production آماده می‌شود.