چرخه حیات کامپوننت React – آموزش Mount، Update و Unmount

چرخه حیات (Lifecycle) مسیر یک کامپوننت از تولد تا حذف از DOM است. در کامپوننت‌های کلاسی با متدهایی مثل componentDidMount مدیریت می‌شد؛ امروز در کامپوننت‌های تابعی همان منطق با useEffect پیاده‌سازی می‌شود.

سه مرحله اصلی

۱. Mount — ساخته شدن

کامپوننت برای اولین بار رندر و به DOM اضافه می‌شود:

useEffect(() => {
  console.log("Component Mounted");
}, []);

آرایه خالی [] → effect فقط یک بار بعد از mount.

۲. Update — به‌روزرسانی

وقتی state یا props تغییر کند، React کامپوننت را دوباره رندر می‌کند:

useEffect(() => {
  console.log("Component Updated — someState changed");
}, [someState]);

هر بار someState عوض شود، effect اجرا می‌شود.

۳. Unmount — حذف شدن

وقتی کامپوننت از DOM حذف می‌شود (مثلاً کاربر صفحه را عوض کند). برای این مرحله از تابع cleanup داخل useEffect استفاده می‌شود:

useEffect(() => {
  return () => {
    console.log("Component Unmounted");
  };
}, []);

نگاشت Lifecycle کلاسیک به useEffect

جمع‌بندی

چرخه حیات به شما کمک می‌کند بدانید کد کی باید اجرا شود: setup در mount، واکنش در update، پاکسازی در unmount. با useEffect و dependency array هر سه مرحله در کامپوننت تابعی قابل کنترل هستند — بدون نیاز به کلاس.