ما هي ميزات التزامن مثل useTransition و useDeferredValue؟

Question

Accepted Answer

يمكن لـ Concurrent React أن **تقاطع وتوقف وتحدد أولويات** عمل التصيير. تحدد بعض التحديثات كـ **انتقالات غير عاجلة** بحيث تبقى التحديثات العاجلة (مثل الكتابة) سريعة الاستجابة حتى عندما يكون هناك إعادة تصيير ثقيلة معلقة.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**لماذا يساعد هذا:** تصفية قائمة ضخمة مكلفة. بدون انتقال، كانت React ستحجب الإدخال أثناء إعادة تصيير آلاف الصفوف، لذا تشعر الكتابة بالتأخر. من خلال التفاف التحديث المكلف في `startTransition`، تحافظ React على تحديثات الإدخال بأولوية عالية ويمكنها **رمي بعيداً** من تصيير تصفية قيد التنفيذ إذا كتبت مفتاح آخر — لا إطارات قديمة ومتقطعة.

## useDeferredValue

bديل أبسط عندما لا تتحكم في المُعيّن — يعطيك نسخة "متخلفة" من القيمة:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## متى تستخدم

استخدم هذه لـ **تحديثات واجهة المستخدم المكلفة وغير العاجلة** التي تقودها مدخلات المستخدم السريعة: البحث أثناء الكتابة على مجموعات بيانات كبيرة، تبديل التبويبات التي تصيير محتوى ثقيل، الجداول الكبيرة المصفاة/المرتبة. بالنسبة للتطبيقات البسيطة، فهي غير ضرورية — تتألق عندما يكون التصيير ثقيلاً بما يكفي لإحداث تأخر واضح في الإدخال.