هوک useDeferredValue به ما این امکان را میدهد که آپدیت UI را به تاخیر بیندازیم.
هوک useDeferredValue یک مقدار(مانند یک state یا پراپس و ...) را دریافت میکند و یک نسخه جدید از آن را با قابلیت ایجاد تاخیر برمیگرداند:
const deferredValue = useDeferredValue(value);
هوک useDeferredValue دو رندر برای هر تغییر ایجاد میکند. در ابتدا با مقدار قبلی استیت، ui را رندر و پس از گذشت مدتی با مقدار جدید state،، رابط کاربری را ریرندر میکند. به مثال زیر دقت کنید:
در مثال بالا موقعی که چیزی در اینپوت وارد میشود به دلیل زمانبر بودن محاسبه لیست، تاخیری تقریبا چند لحظه ای در آپدیت اینپوت هم بوجود می آید. برای حل این مشکل، هوک useDeferredValue را به کار میگیریم:
در مثال بالا، از استیت text یک نسخه deferred شده ایجاد میکنیم. و آنرا به کامپوننت ShowList پاس میدهیم. مقدار اینپوت چون براساس استیت text میباشد سریعا آپدیت میشود اما چون لیست برابر با deferredText میباشد، با تاخیر آپدیت میگردد. به همین خاطر آپدیت لیست تاثیری روی پرفورمنس input نخواهد گذاشت.
گفته شد به ازای هر بار تغییر deferredState ، دوبار UI رندر میشود. یکبار با مقدار قبلی استیت و دفعه دوم با مقدار جدید استیت، بنابراین برای اضافه کردن حالت indicator موقع آپدیت استیت، (همانند isPending که هوک useTransition در اختیارمان قرار میدهد،) میتوانیم مانند نمونه عمل کنیم:
