Quelles sont les fonctionnalités concurrentes comme useTransition et useDeferredValue ?

Question

Accepted Answer

React concurrent peut **interrompre, mettre en pause et prioriser** le travail de rendu. Vous marquez certaines mises à jour en tant que **transitions non urgentes** afin que les mises à jour urgentes (comme la saisie) restent réactives, même lorsqu'un rendu lourd est en attente.

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

**Pourquoi cela aide :** filtrer une énorme liste est coûteux. Sans transition, React bloquerait l'entrée pendant qu'il restitue des milliers de lignes, la saisie semble donc lente. En enveloppant la mise à jour coûteuse dans `startTransition`, React maintient les mises à jour d'entrée à haute priorité et peut **abandonner** un rendu de filtre en cours si vous tapez une autre touche — pas de frames obsolètes et saccadés.

## useDeferredValue

Une alternative plus simple lorsque vous ne contrôlez pas le setter — elle vous donne une copie « retardée » d'une valeur :

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

## Pourquoi c'est important

Utilisez ceux-ci pour les **mises à jour d'interface utilisateur coûteuses et non urgentes** pilotées par une entrée utilisateur rapide : recherche au fur et à mesure que vous tapez sur des ensembles de données volumineux, commutateurs d'onglets qui restituent du contenu lourd, grands tableaux filtrés/triés. Pour les applications simples, elles sont inutiles — elles brillent lorsqu'un rendu est suffisamment lourd pour causer un décalage d'entrée visible.