Cilat janë karakteristikat e njëkohshme si useTransition dhe useDeferredValue?

Question

Accepted Answer

React i Njëkohshëm mund të **ndërpresë, ndali dhe cakto përparësi** puna e renderimit. Ju shënoni disa përditësime si **kalime jo të urgjenta** në mënyrë që përditësimet urgjente (si shtyp) të mbeten të përgjigjesepermes edhe ndërkohë që një ri-render i rëndë është në pritje.

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

**Pse kjo ndihmon:** filtrimi i një liste gjiganike është i shtrenjtë. Pa një kalim, React do të bllokonte hyrjen ndërkohë që rirenderon mijëra rreshta, kështu që shtypi ndjesh ngadalë. Duke mbështjellë përditësimin e shtrenjtë në `startTransition`, React mban përditësimet e hyrjes me përparësi të lartë dhe mund të **hedhë poshtë** një render filtrimi në progres nëse shkruani një tjetër çelës — asnjë kuader e vjetër, dridhe.

## useDeferredValue

Një alternativë më e thjeshtë kur nuk kontrolloni setter — ju jep një kopje "me vonesë" të një vlere:

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

## Kur të përdorni

Përdorni këto për **përditësime të shtrenjta, jo të urgjenta të UI** të nxitura nga hyrje e shpejtë e përdoruesit: kërko-ndërkohë-që-shkruani mbi grupe të mëdha të dhënash, ndërrime të skeda që renderojnë përmbajtje të rëndë, tabela të mëdha të filtruar/të renditura. Për aplikacione të thjeshta ato janë të panevojshme — ato shkëlqejnë kur një render është mjaft i rëndë për të shkaktuar një vonesë hyrjeje të dukshme.