هوک زیر یک دقیقه

برای اینکه بدونیم هوک چیه فقط کافیه حواسمون به یه نکته باشه، اون چیه؟ اینه که ماداریم راجبه ری اکت صحبت میکنیم نه بوکس یا ابزار😂

اما در واقع اینه که خیلی قدیما مثلا قبل از عرضه نسخه 16.8ری اکت، قابلیت هاییکه توی class component های ری اکت داشتیم توی function component ها نمیتونستیم پیاده کنیم

مثلا چه قابلیت هایی؟

1- استیت ها. عملا تا زمانیکه هوک ها معرفی نشده بودن function component ها نمیتونستن از استیت ها استفاده کنن یا به قول معروف stateless بودن

2- لایف سایکل ها. که این مورد هم با اضافه شدن useEfftect توی فانکشن کامپوننت ها حل شد

اما حالا نه تنها میشه کدهای خواناتری نوشت بلکه کدهامون به روز تره و به نظر من فهم راحت تری هم داره البته میگن فهم هوک ها شروع راحتی داره ولی ادامه داشتن این فهمیدن پروسه سختیه.😂

چطوری از useState استفاده کنیم؟

کل چیزی که در مورد این هوک باید بدونیم اینه که خروجیش یه آرایست که خونه اول مقدار استیت فعلی رو توش نگه میداره و خونه دوم یه تابعیه که میاد و استیت رو آپدیت میکنه

اما بین setState توی کلاس کامپوننت ها و useState توی فانکشن کامپوننت ها چه فرقی وجودداره؟
خب عملا هدفشون یکیه اما توی کلاس ها وقتی که ما از setstate استفاده میکنیم استیت جدید اصطلاحا merge میشه و به استیت قبلی اضافه میشه در صورتیکه توی useState استیت جدید میاد و جایگزین استیت قبلی میشه (replace)

پس اگه توی استیتمون یه آبجکتی داشته باشیم که فقط یدونه از المان هاش رو بخوایم تغییر بدیم با useState اگر حواسمون به المان های دیگه نباشه عملا بعد ازآپدیت شدن یه دونه آبجکت با یدونه المان خواهیم داشت

state = {
  instance={id: 'sth',  name: 'abc' }
}
 که اگه بی دقتی کنیم و حین آپدیت فقط یکیشونو تغییر بدیم خروجی میشه :
state = {   instance={name: 'def' } }

مشخصا توی مثال بالا فقط اومدیم و name رو آپدیت کردیم

نظریه نامحبوب نامطلوب : هرچند که به طور کلی استفاده از هوک ها خیلی جذاب و راحت به نظر میاد ولی یه ری اکت کار واقعی اونیه که خاک کلاس کامپوننت ها و this.stateهارو چشیده باشه😂