useTransition र useDeferredValue जस्ता concurrent सुविधाहरू के हुन्?

Question

Accepted Answer

Concurrent React **रेन्डरिङ कार्य अवरोध, रोक र प्राथमिकता दिन** सक्छ। तपाइं केही अद्यावधिकहरूलाई **गैर-जरुरी संक्रमण** को रूपमा चिन्हित गर्नुहुन्छ ताकि जरुरी अद्यावधिकहरू (जस्तै टाइप गर्न) भारी re-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
```

**यो किन मदद गर्छ:** ठूलो सूचीलाई फिल्टर गर्न महंगो छ। संक्रमण बिना, React हजारौं पंक्तिहरू पुनः रेन्डर गरिरहेको बेला इनपुट ब्लक गर्दछ, त्यसैले टाइप गर्न ढिलो लाग्छ। `startTransition` मा महंगो अद्यावधिकलाई र्‍यप गरेर, React उच्च-प्राथमिकता इनपुट अद्यावधिकहरू राख्छ र यदि तपाइं अर्को कुञ्जी दबाउनुभयो भने चल्ने फिल्टर रेन्डरलाई **फेंक सक्छ** — कुनै पनि फीको, झटको फ्रेम छैन।

## useDeferredValue

एक सरल विकल्प जब तपाइं setter नियन्त्रण गर्नुहुन्न — यो तपाइंलाई मान को "पछिपछिको" प्रति दिन्छ:

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

## कहिले प्रयोग गर्ने

यो **महंगो, गैर-जरुरी UI अद्यावधिकहरू** को लागि प्रयोग गर्नुहोस् द्रुत प्रयोगकर्ता इनपुट द्वारा संचालित: ठूलो डेटासेटहरु मा खोज-जस्तै-तपाइं-प्रकार, ट्याब स्विचहरु जो भारी सामग्री रेन्डर गर्छन्, ठूलो फिल्टर गरिएको/क्रमबद्ध गरिएको तालिकाहरु। साधारण अनुप्रयोगहरु को लागि तिनीहरु अनावश्यक छन् — तिनीहरु चम्कन्छन् जब रेन्डरिङ ध्यान देने योग्य इनपुट ल्याग कारण गर्न पर्याप्त भारी हो।