داستان هوک useTransition در ری اکت برمیگرده به اولویت بروزرسانی UI ! زمانیکه تغییراتی رو در صفحه اعمال میکنیم این تغییرات طبق یک اولویتی باید در DOM اعمال بشن که در نهایت کاربر بتونه تغییرات رو مشاهده کنه.
مثلا زمانیکه کاربر در یک Input مقدار جدیدی وارد میکنه ، این تغییرات باید خیلی سریع اعمال بشن تا کاربر بتونه مقادیر تایپ شده خودش رو در صفحه ببینه.
اگه با روند بروزرسانی DOM در ری اکت آشنا نیستین ، پیشنهاد میکنم مقاله virtual DOM در React رو مطالعه کنید.
کمی قبل تر گفتیم که داستان هوک useTransition به اولویت بندی بروزرسانی UI برمیگرده.
تا قبل از ارائه نسخه 18 ری اکت ، چنین قابلیتی وجود نداشت اما از نسخه 18 به بعد ، به لطف هوک useTransition میتونیم بروزرسانی UI رو اولویت بندی کنیم.
این هوک به بهود Performance اپیکیشن ما خیلی کمک میکنه.
فرض کنید یکی از بروزرسانی های UI ما خیلی سنگین و غیرضروری هست ، ما میتونیم توسط useTransition اولویت این آپدیت UI رو بصورت “اولویت کم” نشانه گذاری کنیم تا با اولویت کمتری آپدیت بشه.
بطور پیشفرض تمام بروزرسانی های UI در ری اکت با اولویت فوری انجام میشن و هیچ تفاوتی در اولویت باهمدیگه ندارن.
اینجا یک مشکل بزرگ داریم !!
چون بروزرسانی های غیرضروری و سنگین باعث ایجاد وقفه در بروزرسانی های ضروری و سبک میشن.درصورتیکه میتونیم بروزرسانی های غیرضروری رو بصورت “غیر فوری” نشانه گذاری کنیم تا بعد از بروزرسانی های ضروری ، انجام بشن.
منظور از بروزرسانی UI ، اعمال تغییرات جدید در صفحه هست. ( مثل تایپ کردن کاربر در یک فرم )
ما میتونیم بروزرسانی های UI رو به 2 صورت نشانه گذاری کنیم :
آپدیت های فوری ، ضروری هستن و باید خیلی سریع اعمال بشن اما آپدیت های غیرفوری ، میتونن با وقفه و پس از آپدیت های فوری انجام بشن.
ساده تر بخوایم بگیم ، با هوک useTransition ری اکت میتونیم مشخص کنیم که برخی آز آپدیت های ما کم اولویت هستن.
شکل کلی استفاده از هوک useTransition بصورت زیر هست :
const [isPending, startTransition] = useTransition()
لطفا برای مطالعه نسخه کامل آموزش + مثال ها و تیکه کد ها روی لینک زیر کلیک کنید : آموزش هوک useTransition
