تصور کنید کاربر در یک فیلد جست‌وجو تایپ می‌کند و با هر حرف، فهرستی با هزاران آیتم دوباره رندر می‌شود. نتیجه: تایپ کند و پرتأخیر. ری‌اکت دو ابزار دارد که به‌روزرسانی سنگین را «کم‌اولویت» علامت می‌زنند.

useDeferredValue

function Search({ items }) {
  const [query, setQuery] = useState("");
  const deferred = useDeferredValue(query);

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <List items={items} filter={deferred} />
    </>
  );
}

فیلد ورودی با مقدار فوری به‌روز می‌شود و لیست با مقدار «به‌تعویق‌افتاده» رندر می‌شود؛ پس تایپ روان می‌ماند.

useTransition

const [isPending, startTransition] = useTransition();

function onTabClick(next) {
  startTransition(() => setTab(next));
}

هر به‌روزرسانی داخل startTransition قابل‌وقفه است و اگر کاربر وسط کار چیز دیگری انجام دهد، ری‌اکت رندر قدیمی را رها می‌کند. می‌توانید با isPending نشانگر بارگذاری هم نشان دهید.

  • اگر هنوز کند است، لیست را مجازی‌سازی (virtualization) کنید؛ این دو هوک جایگزین بهینه‌سازی واقعی نیستند.
  • کامپوننت لیست را با memo بپوشانید تا با مقدار تعویق‌افتاده درست کار کند.