ریکت 18 امثال دوتا هوک اضافه کرده با اسم های useTransition و useDeferredValue که قراره راجب useTransition و نحوه ی استفاده اش توی این پست باهم صحبت کنیم
خیلی مختصر و مفید بخوام بگم این هوک کمک میکنه تا اپدیت کردن استیت هارو اولویت بندی کنیم ،
مثال بزنم اینکه غذا نسوزه خیلی مهم تر از اینه که بشقاب سر میز بچینید !
مثال میزنم فرض کنید وارد یک وبسایت فروشگاهی میشید که بیشتر از 10،000 ایتم داره شما میخواین بین این همه دنبال یک ایتم خاص بگردین میرید سراغ سرچ بار و ایتمی که میخواین رو سرچ میکنید دوتا سناریو داریم یا سروری که دارید بهش رکوست میزنید قدیمی شده به طوریکه وقتی فانکشن سرچ اجرا میشه، اپلیکیشن حسابی کند میشه ، یا کلا سیستم شما قدیمیه و دوباره اپلیکیشن شما با یه سرچ ساده کند میشه ، اگر قانع نشدین کافیه برید تو تب performance مرور گرتون و از قسمت CPU گزینه ی slowdown x4 رو انتخاب کنید
حتی شاید تو خیلی از وبسایت ها دیده باشین که وقتی اینپوت سرچ رو پاک میکنید هنوز لیستی که تو سرچ قبلی دیدید داره نمایش داده میشه ، اینپوت و لیستی که نمایش داده میشن سینک نیستند همزمان با هم اپدیت نمیشن ! خب این اصلا تجربه ی کاربری خوبی به ما نمیده ، خب به نظر شما کدوم ضروری تره؟ اپدیت شدن اینپوت یا بروز رسانی لیست ده هزارتاییمون؟قطعا اپدیت شدن اینپوت
اگر بین اپدیت کردن استیت ها میتونستیم یک الویت بندی انجام بدیم این مشکل پیش نمیومد اینجاست که
UseTransition به کمک ما میاد . پس هر وقت خواستید استیت هارو الویت بندی کنید از این هوک استفاده کنید به این صورت :
const [isPending, startTransition] = useTransition();
چیه و چیکار میکنه isPending ؟
استیت isPending میاد به ریکت میگه که آیا اون استیتی که اپدیت شدنش الویت پایین تری داشت اپدیت شده یا نه ؟ (تایپش boolean هست در اصل هر وقت کار startTransition تموم بشه مقدارش برابر با true میشه )
میتونیم باهاش وضعیت UI رو مشخص کنیم مثلا
return (<div id="app"><input type="text" ={updateFilterHandler} />
{isPending && <p style={{color: 'white'}}>Updating list..</p>}<ProductList products={filteredProducts} /></div>);
با استفاده از startTransition میایم به ریکت حالی میکنیم که کدوم استیت الویت پایین تری داره؟
کافیه setState ی موردنظر رو با startTransition میایمwrap میکنیم به این شکل ?:
const [isPending, startTransition] = useTransition();const [filterTerm, setFilterTerm] = useState('');const filteredProducts = filterProducts(filterTerm);const updateFilterHandler = (event) => {
startTransition(() => {setFilterTerm(event.target.value);});}
فقط زمانی از آن استفاده کنید که رابط کاربری کندی دارید، به خصوص در دستگاه های قدیمی تر، یا در شرایطی که راه حل دیگری برای استفاده ندارید. این به این دلیل است که عملکرد اضافی را می گیرد.
(ناگفته نماند که ریکت 18 به پایین یک راه این بود که با pagination بیایم تعداد رکوست های بکند رو محدود کنیم در نتیجه این حجم از دیتارو یک دفعه فتچ نکنیم ولی حالا که ابزارش رو داریم بهتره ازش استفاده کنیم )
مرسی که تا اینجا همراهی کردین تو پست بعدی راجب useDeferredValue صحبت میکنم :)
