concurrent خصوصیات جیسے useTransition اور useDeferredValue کیا ہیں؟

Question

Accepted Answer

Concurrent React **rendering کے کام کو روک سکتا ہے، موخوف کر سکتا ہے، اور ترجیح دے سکتا ہے**۔ آپ کچھ اپ ڈیٹس کو **غیر ضروری transitions** کے طور پر نشان زد کرتے ہیں تاکہ ضروری اپ ڈیٹس (جیسے ٹائپنگ) responsive رہیں، یہاں تک کہ جب بھاری دوبارہ render زیر التوا ہو۔

## 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
```

**یہ کیوں مدد کرتا ہے:** بڑی فہرست کو filter کرنا مہنگا ہے۔ transition کے بغیر، React ہزاروں صفوں کو دوبارہ render کرتے ہوئے input کو block کرے گا، اس لیے typing سست لگتا ہے۔ مہنگے اپ ڈیٹ کو `startTransition` میں لپیٹ کر، React input updates کو high-priority میں رکھتا ہے اور اگر آپ دوسری key type کریں تو جاری filter render کو **throw away** کر سکتا ہے — کوئی پرانے، جھولتے ہوئے frames نہیں۔

## useDeferredValue

ایک سادہ متبادل جب آپ setter کو کنٹرول نہیں کرتے — یہ آپ کو کسی value کی "پسماندہ" کاپی دیتا ہے:

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

## کب استعمال کریں

تیز رفتار user input کے ذریعے چلائے جانے والے **مہنگے، غیر ضروری UI updates** کے لیے ان کا استعمال کریں: بڑے datasets پر search-as-you-type، tab switches جو بھاری content render کرتے ہیں، بڑی filtered/sorted tables۔ سادہ apps کے لیے یہ غیر ضروری ہیں — جب render اتنا بھاری ہو کہ نظر آنے والے input lag کو متحرک کریں۔