هوک 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 صورت نشانه گذاری کنیم :
- آپدیت فوری
- آپدیت غیرفوری
آپدیت های فوری ، ضروری هستن و باید خیلی سریع اعمال بشن اما آپدیت های غیرفوری ، میتونن با وقفه و پس از آپدیت های فوری انجام بشن.
ساده تر بخوایم بگیم ، با هوک useTransition ری اکت میتونیم مشخص کنیم که برخی آز آپدیت های ما کم اولویت هستن.
چطور از useTransition در React استفاده کنیم ؟
شکل کلی استفاده از هوک useTransition بصورت زیر هست :
const [isPending, startTransition] = useTransition()
هوک useTransition یک آرایه به ما برمیگردونه.
مقدار اول این آرایه isPending هست و زمانیکه کد داخل startTransition در حال اجرا باشه ، isPending مقدار True میگیره.
در واقع زمانیکه آپدیت UI با اولویت کم داره انجام میشه ، متغیر isPending مقدار True میگیره و زمانیکه این بروزرسانی با اولویت کم تموم بشه متغیر isPending مقدار false میگیره.
مقدار دوم آرایه ، startTransition هست که خودش یک Callback Function هست. داخل این تابع میتونیم تیکه کدی که میخوایم با اولویت کم برامون اجرا بشه رو قرار بدیم.
مثلا میخوایم بروزرسانی یک State با اولویت کمتری انجام بشه.پس بصورت زیر عمل میکنیم :
const [isPending, startTransition] = useTransition()
const [list,setList]=useState(null) // یه استیت برای ذخیره لیست که میخوایم با اولویت کم انجام بشه
// کد داخل این تابع با اولویت کم اجرا میشه چون از هوک بالا استفاده کردیم.
startTransition(() => {
setList(largeList.filter(item => item.name.includes(e.target.value)))
})
بروزرسانی UI هایی که سنگین هستن با تاخیر و اولویت کم !
بعضی از بروزرسانی ها سنگین هستن و در عوض نمیخوایم با اولویت بالایی برای ما انجام بشن!
ما نیاز داریم که این بروزرسانی ها با اولویت پایین انجام بشن چون اولویت های بالا تری داریم و میخوایم برخی بروزرسانی ها که مهمتر هستن ، زودتر انجام بشن.
تو مثال زیر ، بروزرسانی State برای ما اولویت کمی داره ، به همین دلیل از هوک useTransition استفاده میکنیم تا به React بگیم که این آپدیت برای ما اولویت پایینی داره :
import { useState, useTransition } from 'react';
export function FilterList({ names }) {
const [query, setQuery] = useState('');
const [highlight, setHighlight] = useState('');
const [isPending, startTransition] = useTransition();
const changeHandler = ({ target: { value } }) => {
setQuery(value);
startTransition(() => setHighlight(value));// اینجا گفتیم که این آپدیت اولویت کمی داره
};
return (
<div>
<input onChange={changeHandler} value={query} type="text" />
{names.map((name, i) => (
<ListItem key={i} name={name} highlight={highlight} />
))}
</div>
);
}
به خط 11 دقت کنید . به دلیل استفاده از هوک useTransition این بروزرسانی State با اولویت کمی برای ما انجام میشه.
جمع بندی
هوک useTransition به ما امکان مدیریت بروزرسانی های UI رو میده که مشخص کنیم کدوم آپدیت UI اولویت کمتر و کدوم اولویت بیشتری داره !
اینجوری علاوه بر بهبود Performance اپیکیشن باعث بهبود تجربه کاربری ( UX ) هم میشیم.
به کمک هوک useTransition در React میتونیم بروزرسانی UI هایی که اولویت کمتری برای ما دارن رو ، با اولویت کمتر انجام بدیم.
اگه محاسبات سنگینی دارید که اولویت کمتری در زمینه بروزرسانی UI داره ، با کمک این هوک میتونید با اولویت کمتری این محاسبه رو در UI لحاظ کنید که باعث بهبود تجربه کاربری میشه.
هوک useTransition به ما امکان مدیریت بروزرسانی های UI رو میده که مشخص کنیم کدوم آپدیت UI اولویت کمتر و کدوم اولویت بیشتری داره !
بعضی بروزرسانی های UI غیرضروری و سنگین هستن ! میتونیم این بروزرسانی هارو با اولویت کمتری انجام بدیم که کاربر تغییرات ضروری رو سریعتر در UI مشاهده کنه.
دیدگاهتان را بنویسید