درود فراوان دوستان 🤚 من امیررضا ریاحی هستم نویسنده جدید دیتی. تو این پست از دیتی قراره با هم یکی از هوکهای ریاکت به نام useDeferredValue رو بررسی کنیم. این پست از مجموعه پستهای ریاکت ۱۰۱ هست که شامل مجموعهای از پستهای کوتاه و کاربردی ریاکتی میشه.
useDeferredValue چیه؟
useDeferredValue یکی از هوکهایی هست که در React ۱۸ معرفی شد. کار اصلی این هوک اینه که به شما اجازه میده آپدیت کردن رابط کاربری (UI) رو به تعویق بندازین و همچنین میتونین به درخواستها پاسخ بدین بدون اینکه UI پروژتون تحت تاثیر قرار بگیره.
اما این هوک بیشتر کجاها کاربرد داره ؟ 🤔
- برای زمانیهایی که یک محتوای جدید در حال بارگذاریه ولی شما نمیخواین UI پروژتون وابسته به بارگذاری محتوای جدید باشه. برای همین محتوای فعلی رو به کاربر نمایش میدین تا محتوای جدید به طور کامل بارگذاری بشه و جایگزین محتوای فعلی بشه. این میتونه رابطکاربری رو افزایش بده 🚀
- میتونیم از این هوک برای زمانیهایی که میخوایم به کاربر اطلاع بدیم که محتوای جدید درحال بارگذاری هست استفاده کنیم. اینجوری کاربر متوجه میشه محتوای جدید داره لود میشه پس منتظر میمونه و محتوای فعلی رو تا جایگزینی میتونه مشاهده کنه و ازش استفاده کنه ⌛
- با استفاده از
useDeferredValueمیتونیم رندر کردن بخشی از رابط کاربری را به تأخیر انداخت تا از پرشها و قطعیها در نتیجه عملیاتهای طولانی جلوگیری بشه و تجربهکاربری بهتر ایجاد کرد ⚡
نحوهٔ استفاده از useDeferredValue چجوریه؟
همونطور که میدونین قابلیت "سرچ کردن" در اکثر پروژهها دیده میشه. پیادهسازی این قابلیت به این شکله که شما باید روی هر حرف جدیدی که کاربر وارد میکنه اطلاعات رو به سمت سرور بفرستین تا نتیجه رو نمایش بدین. پیادهسازی این قابلیت بدون استفاده از useDeferredValue برنامه شما رو کند میکنه!
حالا چرا؟ 🧐
چون ما روی هر حرفی که کاربر داره وارد میکنه عملیات سنگین انجام میدیم و از بین همه دادههایی که موجوده میخوایم یک داده به خصوص رو فیلتر کنیم (به ازای هر حرف). یعنی اگر کلمه ورودی کاربر ۵ حرف داشت ۵ بار درخواست میفرستیم به کل دادهها که به شدت عملکرد رو پایین میاره و برنامه رو کند میکنه.
اما بریم سراغ نحوهٔ استفاده از useDeferredValue و این مثال رو باهم پیادهسازی کنیم.
تصور کنین در کامپوننت SearchResults، ما به ازای هر کاراکتر وارد شده درخواست میفرستیم سمت سرور برای فیلتر کردن داده. در واقع این کامپوننت به ازای هر حرفی که کاربر وارد میکنه اجرا میشه: