فرانت اندی | FrontEndi
فرانت اندی | FrontEndi
خواندن ۲ دقیقه·۱ سال پیش

هوک useTransition در ری اکت ! بررسی تخصصی useTransition در React !

داستان هوک useTransition در ری اکت برمیگرده به اولویت بروزرسانی UI ! زمانیکه تغییراتی رو در صفحه اعمال میکنیم این تغییرات طبق یک اولویتی باید در DOM اعمال بشن که در نهایت کاربر بتونه تغییرات رو مشاهده کنه.

مثلا زمانیکه کاربر در یک Input مقدار جدیدی وارد میکنه ، این تغییرات باید خیلی سریع اعمال بشن تا کاربر بتونه مقادیر تایپ شده خودش رو در صفحه ببینه.

اگه با روند بروزرسانی DOM در ری اکت آشنا نیستین ، پیشنهاد میکنم مقاله  virtual DOM در React رو مطالعه کنید.

هوک useTransition در ری اکت چیست ؟

کمی قبل تر گفتیم که داستان هوک useTransition به اولویت بندی بروزرسانی UI برمیگرده.

تا قبل از ارائه نسخه 18 ری اکت ، چنین قابلیتی وجود نداشت اما از نسخه 18 به بعد ، به لطف هوک useTransition میتونیم بروزرسانی UI رو اولویت بندی کنیم.

این هوک به بهود Performance اپیکیشن ما خیلی کمک میکنه.

فرض کنید یکی از بروزرسانی های UI ما خیلی سنگین و غیرضروری هست ، ما میتونیم توسط useTransition اولویت این آپدیت UI رو بصورت “اولویت کم” نشانه گذاری کنیم تا با اولویت کمتری آپدیت بشه.

بطور پیشفرض تمام بروزرسانی های UI در ری اکت با اولویت فوری انجام میشن و هیچ تفاوتی در اولویت باهمدیگه ندارن.

اینجا یک مشکل بزرگ داریم !!

چون بروزرسانی های غیرضروری و سنگین باعث ایجاد وقفه در بروزرسانی های ضروری و سبک میشن.درصورتیکه میتونیم بروزرسانی های غیرضروری رو بصورت “غیر فوری” نشانه گذاری کنیم تا بعد از بروزرسانی های ضروری ، انجام بشن.

منظور از بروزرسانی UI ، اعمال تغییرات جدید در صفحه هست. ( مثل تایپ کردن کاربر در یک فرم )

ما میتونیم بروزرسانی های UI رو به 2 صورت نشانه گذاری کنیم :

  1. آپدیت فوری
  2. آپدیت غیرفوری

آپدیت های فوری ، ضروری هستن و باید خیلی سریع اعمال بشن اما آپدیت های غیرفوری ، میتونن با وقفه و پس از آپدیت های فوری انجام بشن.

ساده تر بخوایم بگیم ، با هوک useTransition ری اکت میتونیم مشخص کنیم که برخی آز آپدیت های ما کم اولویت هستن.

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

شکل کلی استفاده از هوک useTransition بصورت زیر هست :

const [isPending, startTransition] = useTransition()

لطفا برای مطالعه نسخه کامل آموزش + مثال ها و تیکه کد ها روی لینک زیر کلیک کنید : آموزش هوک useTransition

ری اکتهوک usetransitionusetransition ری اکتreactuseTransition
فرانت اِندی مرجع تخصصی فرانت اند برای فارسی زبانان است . هدف ما گردآوری و انتشار تخصصی ترین و بهترین مقالات و دوره های آموزشی حوزه فرانت اند در یک منبع فارسی زبان است .
شاید از این پست‌ها خوشتان بیاید