concurrent सुविधाएं जैसे useTransition और useDeferredValue क्या हैं?

Question

IT Interview Practice · Accepted Answer

Concurrent React **interrupt, pause, और prioritize** rendering कार्य को कर सकता है। आप कुछ updates को **non-urgent transitions** के रूप में चिह्नित करते हैं ताकि urgent updates (जैसे typing) responsive रहें भले ही एक भारी 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
```

**यह मदद क्यों करता है:** एक विशाल list को filter करना महंगा है। transition के बिना, React input को block कर देता है जबकि हजारों rows को re-render करता है, इसलिए typing laggy लगता है। expensive update को `startTransition` में wrap करके, React input updates को high-priority रखता है और अगर आप एक और key type करें तो in-progress filter render को **throw away** कर सकता है — कोई stale, janky frames नहीं।

## useDeferredValue

एक सरल विकल्प जब आप setter को नियंत्रित नहीं करते — यह आपको value की "lagging" copy देता है:

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

## कब उपयोग करें

इन्हें **expensive, non-urgent UI updates** के लिए use करें जो fast user input द्वारा संचालित हैं: बड़े datasets पर search-as-you-type, tab switches जो heavy content render करते हैं, बड़ी filtered/sorted tables। सरल apps के लिए ये अनावश्यक हैं — वे तब चमकते हैं जब render काफी heavy हो कि visible input lag का कारण बने।

useTransition

useDeferredValue

कब उपयोग करें

संबंधित प्रश्न