useTransition ਅਤੇ useDeferredValue ਵਰਗੀਆਂ ਸਮਕਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਕੀ ਹਨ?

Question

Accepted Answer

Concurrent React **ਰੈਂਡਰਿੰਗ ਕੰਮ ਨੂੰ ਖਾਮੋਸ਼ ਕਰ ਸਕਦਾ ਹੈ, ਰੋਕ ਸਕਦਾ ਹੈ ਅਤੇ ਤਰਜੀਹ ਦੇ ਸਕਦਾ ਹੈ**। ਤੁਸੀਂ ਕੁਝ ਅਪਡੇਟਸ ਨੂੰ **ਗੈਰ-ਜ਼ਰੂਰੀ ਪਰਿਵਰਤਨ** ਵਜੋਂ ਨਿਸ਼ਾਨਬੱਧ ਕਰਦੇ ਹੋ ਤਾਂ ਜੋ ਜ਼ਰੂਰੀ ਅਪਡੇਟਸ (ਜਿਵੇਂ ਟਾਈਪ ਕਰਨਾ) ਇੱਕ ਭਾਰੀ ਰੀ-ਰੈਂਡਰ ਅਲੱਗ ਹੋਣ ਦੌਰਾਨ ਵੀ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਰਹਿਣ।

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

ਇੱਕ ਸਰਲ ਵਿਕਲਪ ਜਦੋਂ ਤੁਸੀਂ ਸੈਟਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਨਹੀਂ ਕਰਦੇ — ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਮੁੱਲ ਦੀ "ਆਖਰੀ" ਨਕਲ ਦਿੰਦਾ ਹੈ:

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

## ਕਦੋਂ ਬਰਤੋਂ ਕਰੀਏ

ਇਹ **ਮਹਿੰਗੇ, ਗੈਰ-ਜ਼ਰੂਰੀ UI ਅਪਡੇਟਸ** ਲਈ ਬਰਤੋਂ ਕਰੋ ਤੇਜ਼ ਯੂਜ਼ਰ ਇਨਪੁਟ ਦੁਆਰਾ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ: ਵੱਡੀਆਂ ਡੇਟਾ ਸੈਟਾਂ ਉੱਪਰ ਸਰਚ-ਜਿਵੇਂ-ਤੁਸੀਂ-ਟਾਈਪ ਕਰਦੇ ਹੋ, ਟੈਬ ਸਵਿੱਚਾਂ ਜੋ ਭਾਰੀ ਸਮਗ੍ਰੀ ਨੂੰ ਪ੍ਰਸਤੁਤ ਕਰਦੇ ਹਨ, ਵੱਡੀਆਂ ਫਿਲਟਰਡ/ਕ੍ਰਮਬੱਧ ਸਾਰਣੀਆਂ। ਸਧਾਰਣ ਐਪਸ ਲਈ ਇਹ ਗੈਰ-ਜ਼ਰੂਰੀ ਹਨ — ਇਹ ਪ੍ਰਕਾਸ਼ ਕਰਦੇ ਹਨ ਜਦੋਂ ਇੱਕ ਰੈਂਡਰ ਇੰਨਾ ਭਾਰੀ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਦਿਸਣ ਵਾਲਾ ਇਨਪੁਟ ਲੈਗ ਦਾ ਕਾਰਣ ਬਣੇ।