X'inhuma l-karatteristiċi concurrency bħal useTransition u useDeferredValue?

Question

Accepted Answer

React concurrency jista' **waqf, twaqqaf, u pprioritizza** xogħol tar-rendering. Inti tippota għal xi aġġornamenti bħala **non-urgent transitions** sabiex aġġornamenti urġenti (bħal ktieb) jibqgħu responsivi anke waqt li heavy re-render huwa 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
```

**Għaliex dan jgħin:** il-filtrazzjoni ta' lista kbira hija xogħol għali. Mingħajr transition, React jseggħ l-input waqt li jagħmilha render elf rullelli, għalhekk il-ktieb jħoss bil-mod. Billi tgħid l-aġġornament għali ġo `startTransition`, React ipoġġi l-aġġornamenti input b'prioriità għolja u jista' **jitfa'** render ta' filtru li huwa jingħammal issa jekk inti tkun tikeb ċavetta oħra — l-ebda qafas balu, terremott.

## useDeferredValue

Alternattiva aktar sempliċi meta inti ma tikkontrollax il-setter — agħtik kopja ta' valur "qaħqaħ:

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

## Meta tuża

Uża dan għal **aġġornamenti UI għalien, non-urgent** misjuqa mill-input rapidu tal-utent: tiftex-aktarx-inti-tkun-tikeb fuq settijiet ta' data kbar, bidla ta' tabs li jagħmlu render ta' kontenut tqil, tabelli kbar filtrati/issortati. Għal apps sempliċi huma mhux meħtieġa — jisħqu meta r-rendering huwa pjuttost tqil biex jisbaħ lag ta' input viżibbli.