concurrent ફીચર્સ જેવા કે useTransition અને useDeferredValue શું છે?

Question

Accepted Answer

Concurrent React **interrupt, pause, અને prioritize** rendering કાર્યને શકે છે. તમે કેટલાક updates ને **non-urgent transitions** તરીકે mark કરો તાથી urgent updates (જેમ કે typing) તેજ રહે એમ જ જ્યારે ભારે re-render pending છે.

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

**આ શા માટે મદદરૂપ છે:** વિશાળ યાદીને filtering કરવું મંહગું છે. transition વિના, React input ને block કરશે જ્યારે હજારો rows ને re-render કરશે, તેથી typing laggy લાગશે. expensive update ને `startTransition` માં wrap કરીને, React input updates ને high-priority રાખે છે અને in-progress filter render ને **throw away** કરી શકે છે જો તમે બીજી key type કરો — કોઈ 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** માટે ઉપયોગ કરો જે fast user input દ્વારા ચલાવવામાં આવે છે: large datasets પર search-as-you-type, heavy content render કરતી tab switches, મોટી filtered/sorted tables. સરળ apps માટે તેઓ અનાવશ્યક છે — તેઓ light upમાં તેજ હોય છે જ્યારે render heavy હોય તો જે visible input lag નું કારણ બને છે.