useTransition మరియు useDeferredValue వంటి concurrent లక్షణాలు ఏవి?

Question

Accepted Answer

Concurrent React **ప్రతిబింబ పనిని అంతరాయం, పాజ్ మరియు ప్రాధాన్యత ఇవ్వగలదు**. మీరు కొన్ని updates ను **non-urgent transitions** గా గుర్తించారు, తద్వారా urgent updates (టైపింగ్ వంటివి) heavy re-render పెండింగ్‌లో ఉన్నప్పటికీ responsive గా ఉంటాయి.

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

**ఇది ఎందుకు సహాయపడుతుంది:** పెద్ద జాబితాను ఫిల్టర్ చేయడం ఖరీదైనది. transition లేకుండా, React వేలాది వరుసలను re-render చేసేటప్పుడు ఇన్‌పుట్‌ను బ్లాక్ చేస్తుంది, కాబట్టి టైపింగ్ అధీరమైనదిగా ఫీల్ అవుతుంది. expensive update ను `startTransition`లో చుట్టడం ద్వారా, React ఇన్‌పుట్ updates ను high-priority గా ఉంచుతుంది మరియు మీరు మరొక కీ టైప్ చేస్తే in-progress filter render ను **throw away** చేయవచ్చు — old, janky frames లేవు.

## useDeferredValue

మీరు setter ను నియంత్రించనప్పుడు సరళమైన ప్రత్యామ్నాయం — ఇది మీకు విలువ యొక్క "lagging" కాపీను ఇస్తుంది:

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

## ఎప్పుడు ఉపయోగించాలి

వేగవంతమైన వినియోగదారు ఇన్‌పుట్ ద్వారా నడపబడే **expensive, non-urgent UI updates** కోసం వీటిని ఉపయోగించండి: పెద్ద డేటాసెట్‌ల మీద search-as-you-type, heavy content render చేసే tab switches, పెద్ద filtered/sorted tables. సాధారణ apps కోసం అవి అవసరం లేనివి — render ఇన్‌పుట్ lag కు కారణమవుతుంది చేయడానికి తగినంత heavy ఉన్నప్పుడు అవి shine చేస్తాయి.