شرح صفوف ومحتوى الفقرة
تقرن إصدارات React الحديثة مكون <Suspense> بخطافين متقدمين للحفاظ على سلاسة الاستجابة هما useTransition() وuseDeferredValue().
عند تغليف تبديل التبويب داخل startTransition(() => setTab("reports"))، تعامله React كتحديث غير عاجل فتُبقي التبويب الحالي ظاهراً وقابلاً للتفاعل مع راية isPending بدلاً من إخفاء الشاشة فجأة. وبالمثل يتيح useDeferredValue(query) تحديث حقل الكتابة فوراً بينما تلحق به القائمة الضخمة بسلاسة دون تجميد لوحة المفاتيح:
HTML
import {
useDeferredValue,
useState,
useTransition,
} from 'react';
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const [isPending, startTransition] = useTransition();