🧠 چرا در React تا قبل از دریافت داده از API مقدار undefined برمی‌گرده؟

یکی از سوال‌های رایج بین برنامه‌نویس‌های React (مخصوصاً تازه‌کارها) اینه که:

"چرا وقتی از API داده می‌گیرم، تا قبل از اومدن پاسخ، مقدار undefined نمایش داده میشه؟"

بیایید با هم دقیق بررسی کنیم 👇

⚙️ 1. ماهیت asynchronous در React

در React، وقتی شما یک درخواست (مثل fetch یا axios) به API می‌فرستید،
کامپوننت شما بلافاصله render میشه — حتی قبل از اینکه سرور پاسخی بفرسته.

پس در اولین رندر، مقدار state هنوز تنظیم نشده و به صورت undefined یا null هست.
به محض اینکه پاسخ از سرور برگرده، React دوباره render می‌کنه و داده‌ها به‌روزرسانی می‌شن.

📘 مثال:

const [data, setData] = useState();

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(result => setData(result));
}, []);

return <div>{data?.name}</div>;

در اولین لحظه‌ی اجرای این کد، data هنوز مقداری نداره → پس undefined نمایش داده میشه.
بعد از چند میلی‌ثانیه، با دریافت پاسخ، data مقدار می‌گیره و کامپوننت دوباره render میشه.

✅ 2. راه‌حل‌ها

🟢 مقدار اولیه بده

همیشه برای state یک مقدار پیش‌فرض بذار تا در اولین رندر خطا نگیری:

const [data, setData] = useState({});
const [items, setItems] = useState([]);

🟢 رندر شرطی کن

قبل از نمایش داده، بررسی کن مقدار گرفته شده یا نه:

return (
  <div>
    {data ? (
      <div>{data.name}</div>
    ) : (
      <div>در حال بارگذاری...</div>
    )}
  </div>
);

🟢 از optional chaining استفاده کن

برای جلوگیری از ارورهای «cannot read property of undefined»:

<div>{data?.name}</div>

فقط حواست باشه که این کار جلوی خطا رو می‌گیره، اما مشکل async بودن رو حل نمی‌کنه.

⚠️ 3. دلایل دیگر undefined بودن داده‌ها

علت ها توضیح

❌ useEffect اشتباه نوشته شده dependency array خالی نیست یا چند بار call می‌زنه

❌ خطای backend یا delay در پاسخ ممکنه promise resolve نشه

❌ destructuring زودهنگام مثلاً const { name } = data قبل از مقداردهی

❌ اشتباه در setState مثلاً setData(res.data) باید باشه ولی فقط

setData(res) نوشتی

❌ async/await فراموش شده وقتی از await استفاده نکنی، مقدار Promise برمی‌گرده

🧩 4. بهترین الگو برای مدیریت حالت‌ها

در پروژه‌های واقعی بهتره برای هر وضعیت، state جداگانه بذاری:

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

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch('/api/data');
      const json = await res.json();
      setData(json);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

if (loading) return <div>در حال بارگذاری...</div>;
if (error) return <div>خطا در دریافت داده</div>;

return <div>{data.name}</div>;

این الگو هم کد تمیزتری داره، هم تجربه‌ی کاربری بهتری به مخاطب میده.

💬 جمع‌بندی

درundefined , React بودن داده‌ها قبل از پاسخ API یک رفتار طبیعی است.
چیزی که اهمیت دارد، نحوه‌ی مدیریت این حالت‌های موقت است.
با رعایت چند نکته ساده (state اولیه، رندر شرطی، و کنترل خطاها)،
کد شما هم خواناتر میشه، هم خطاهای زمان اجرا به حداقل می‌رسن.