concurrent वैशिष्ट्ये जसे की useTransition आणि useDeferredValue म्हणजे काय?

Question

IT Interview Practice · Accepted Answer

Concurrent React **रेंडरिंग काम व्यत्यस्त, विराम आणि प्राधान्य** देऊ शकते. तुम्ही काही अपडेट्स **non-urgent transitions** म्हणून चिन्हांकित करता जेणेकरून जरूर अपडेट्स (जसे टाइपिंग) अगदी प्रतिक्रियाशील राहतात जेव्हा एक भारी 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]);
```

## केव्हा वापरा

हे **महाग, non-urgent UI अपडेट्स** साठी वापरा ज्याला जलद वापरकर्ता इनपुट चालित केले जाते: मोठ्या डेटासेटवर शोध-जसे-तुम्ही-प्रकार, टॅब स्विच करते जे भारी सामग्रीला रेंडर करतात, मोठ्या फिल्टर/क्रमबद्ध टेबल्स. साध्या अ्यापसाठी ते अनावश्यक आहेत — जेव्हा रेंडर दृश्यमान इनपुट लॅग कारण करण्यासाठी पुरेसे भारी असेल तेव्हा ते चमकते.

useTransition

useDeferredValue

केव्हा वापरा

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