useTransition மற்றும் useDeferredValue போன்ற concurrent அம்சங்கள் என்ன?

Question

Accepted Answer

Concurrent React ஆனது **rendering வேலையை நிறுத்தி, இடைநிறுத்தி, மற்றும் অগ்রাধிகாரம் கொடுக்க** முடியும். நீங்கள் சில updates ஐ **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
```

**இது ஏன் உதவுகிறது:** பெரிய list ஐ filter செய்வது விலையாக இருக்கிறது. transition இல்லாமல், React ஆனது ஆயிரக்கணக்கான rows ஐ re-render செய்யும் போது input ஐ block செய்யும், இதனால் typing slow ஆக உணர்ந்திருக்கும். expensive update ஐ `startTransition` ல் wrap செய்வதன் மூலம், React input updates ஐ high-priority ல் வைத்திருக்கிறது மற்றும் நீங்கள் மற்றொரு key type செய்தால் in-progress filter render ஐ **throw away** செய்யும் — stale, janky frames கிடையாது.

## useDeferredValue

Non-urgent transitions setter ஐ நீங்கள் control செய்யாமல் உள்ள போது ஒரு simpler alternative — இது உங்களுக்கு ஒரு "lagging" value ஐ கொடுக்கிறது:

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

## எப்போது use செய்ய வேண்டும்

வேகமான user input ஆல் চালிக்கப்படும் **expensive, non-urgent UI updates** க்கு இவைகளை use செய்யுங்கள்: பெரிய datasets மீது search-as-you-type, heavy content render செய்யும் tab switches, பெரிய filtered/sorted tables. Simple apps க்கு அவை தேவையற்றவை — render ஆனது visible input lag ஐ ஏற்படுத்த போதுமான அளவு heavy ஆக இருக்கும் போது அவை shine செய்கின்றன.