داده‌های غیرهمزمان در React – شبیه‌سازی دریافت داده از API با useEffect و Promise

مقدمه

در اپلیکیشن‌های React، داده‌ها معمولاً از سرور یا پایگاه‌داده به‌صورت غیرهمزمان دریافت می‌شوند. این فرآیند باعث می‌شود کامپوننت ابتدا render شود و سپس داده‌ها بارگذاری شوند. در این مقاله، نحوهٔ شبیه‌سازی این رفتار با داده‌های نمونه را بررسی می‌کنیم.

تعریف تابع شبیه‌ساز دریافت داده

ابتدا تابعی تعریف می‌کنیم که یک Promise بازمی‌گرداند و داده‌های نمونه را درون آن قرار می‌دهد:

const getAsyncStories = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: { stories: initialStories } }), 2000)
  );

تابع بالا پس از ۲ ثانیه داده‌ها را بازمی‌گرداند تا رفتار واقعی‌تری از دریافت داده شبیه‌سازی شود.

استفاده از useEffect برای بارگذاری داده

در کامپوننت App، وضعیت اولیه لیست را خالی تعریف می‌کنیم و سپس با استفاده از useEffect داده‌ها را بارگذاری می‌کنیم:

const [stories, setStories] = React.useState([]);

React.useEffect(() => {
  getAsyncStories().then(result => {
    setStories(result.data.stories);
  });
}, []);

آرایهٔ وابستگی خالی باعث می‌شود این ساید افکت فقط یک بار هنگام mount اجرا شود.

رفتار رندر شدن و بارگذاری

در ابتدا لیست خالی است و چیزی نمایش داده نمی‌شود. پس از ۲ ثانیه، Promise حل می‌شود و داده‌ها در وضعیت ذخیره می‌شوند. سپس کامپوننت دوباره render می‌شود و لیست نمایش داده می‌شود.

مزایای این روش

• شبیه‌سازی دقیق‌تر رفتار دریافت داده از API
• آمادگی برای اتصال به API واقعی در آینده
• مدیریت وضعیت با useState و ساید افکت با useEffect

جمع‌بندی

در این مقاله، داده‌های نمونه را به‌صورت غیرهمزمان بارگذاری کردیم تا رفتار واقعی‌تری از دریافت داده در React داشته باشیم. این روش پایه‌ای برای اتصال به APIهای واقعی و مدیریت داده‌های پویا در رابط کاربری است.