Care sunt caracteristicile concurente precum useTransition și useDeferredValue?

Question

IT Interview Practice · Accepted Answer

React Concurrent poate **întrerupe, pauzează și prioritizează** munca de randare. Marchezi unele actualizări ca **tranziții non-urgente** pentru ca actualizările urgente (cum ar fi tastarea) să rămână responsive chiar și în timp ce o re-randare grea este în curs.

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

**De ce ajută:** filtrarea unei liste imens este costisitoare. Fără o tranziție, React ar bloca intrarea în timp ce randează din nou mii de rânduri, deci tastarea pare lentă. Prin înfășurarea actualizării costisitoare în `startTransition`, React menține actualizările de intrare cu prioritate ridicată și poate **arunca** o randare de filtru în curs de desfășurare dacă tastezi o altă tastă — fără cadre vechi și jerkies.

## useDeferredValue

O alternativă mai simplă atunci când nu controlezi setter-ul — îți oferă o copie "întârziată" a unei valori:

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

## Când să le folosești

Folosește acestea pentru **actualizări UI costisitoare și non-urgente** impulsionate de intrarea rapidă a utilizatorului: căutare pe măsură ce tastezi pe seturi de date mari, schimbări de file care randează conținut greu, tabele mari filtrate/sortate. Pentru aplicații simple sunt inutile — strălucesc atunci când o randare este suficient de grea pentru a cauza o întârziere de intrare vizibilă.

useTransition

useDeferredValue

Când să le folosești

Întrebări conexe