Ni nini sifa za concurrent kama useTransition na useDeferredValue?

Question

Accepted Answer

Concurrent React inaweza **kukatiza, kusimamisha, na kutekeleza kwa ajili ya kuyazalisha upya** kazi ya rendering. Unaweka baadhi ya updates kama **non-urgent transitions** ili updates ya haraka (kama kuandika) kubaki responsive hata wakati heavy re-render inasubiri.

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

**Kwa nini hii inasaidia:** kuchuja orodha kubwa ni ghali. Bila transition, React ingezuia input wakati wa re-render ya safu nyingi, kwa hivyo kuandika kunajisikia kwa kasi. Kwa kufunika update ya ghali katika `startTransition`, React inabaki input updates kwa priority ya juu na inaweza **kutupa** render inayofanyika ikiwa uandike key nyingine — hakuna frames za zamani, zenye mvurire.

## useDeferredValue

Chaguo rahisi wakati huondiki setter — inakupatia kopi ya "lagging" ya thamani:

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

## Wakati wa kutumia

Tumia hizi kwa **expensive, non-urgent UI updates** unaotarajiwa na input ya haraka ya mtumiaji: search-as-you-type juu ya datasets kubwa, tab switches zenye render content nzito, meza kubwa zilizochujwa/zimesortwa. Kwa apps rahisi si muhimu — zinalingana wakati render ni nzito vya kutosha kusababisha lag ya input inayoonekana.