درود دوستان 👋 دو قابلیت پرکاربرد ریاکت useState و useReducer هستن که کاربردهای مشابهی دارن، اما برای حل مشکلات به خصوصی معرفی شدن که اونها رو از همدیگه متمایز میکنه.
توی این پست میخوایم با این شباهتها و تفاوتها آشنا بشیم. این پست از مجموعه پستهای ریاکت ۱۰۱ هست که شامل مجموعهای از پستهای کوتاه و کاربردی ریاکت هست. 😉 بریم که ادامه پست رو بررسی کنیم.
⚔️ useState و useReducer ⚔️
هر دو هوک برای مدیریت اطلاعات (State) توی یک کامپوننت استفاده میشن. احتمالاً با useState آشنایی بیشتری دارین. در واقع کاری که useState انجام میده رو useReducer هم میتونه انجام بده و بلعکس. اما چیزی که useReducer رو متمایز میکنه، قدرت و انعطافپذیری اون توی ذخیره و مدیریت اطلاعات پیچیدهتر مثل یک آبجکت و آرایه با عمق زیاد هست.
کاربرد منحصر به فرد
useState بهترین گزینه برای مدیریت اطلاعات ساده مثل یک رشته، عدد یا آبجکت و آرایه تک سطحی هست. اما useReducer برای مدیریت اطلاعات پیچیدهتر معرفی شده که برای ذخیره و بروزرسانی برای نیاز به طی کردن فرآیند خاصی دارن. مثل بروزرسانی یک آبجکت بزرگ و تو در تو (مثل تنظیمات سراسری یک برنامه)، و یا بروزرسانی اطلاعات بهصورت شرطی (Conditional).
مدیریت اطلاعات فرم
اگه ورودیهای فرم ما به هم وابسته هستن و وقتی که یک ورودی تغییر کرد نیاز داریم ورودیهای دیگه رو بروزرسانی کنیم، استفاده از useReducer گزینه مناسبی میتونه باشه. اما برای ورودیهایی که از مستقل هستن و به هم وابستگی ندارن بهتره که از useState استفاده کنیم.
خوانایی و تمیزی کد
useReducer مبتنی بر تعریف کردن Action ها و Reducer ها هست. گرچه اینها ویژگیهای قدرتمندی هستن، اما در مقایسه با useState حجم کدهای بیشتری رو اشغال میکنن و باعث کاهش خوانایی برنامه میشن. پس تا جایی که میتونیم بهتره useState رو ترجیح بدیم. البته Reducer ها و اکشنهایی که توی useReducer داریم میتونن یکبار نوشته و توی جاهای دیگه Import و استفاده بشن که باعث کاهش نوشتن کدهای تکراری میشه.
خب دوستان این پست هم به پایان رسید. امیدوارم از اطلاعاتی که بررسی کردیم استفاده کرده باشین. روزتون خوش 😉✌️