useTransition

React 🟡 Mid

Definition

Hook qui marque une mise a jour comme non urgente, permettant a React de la differer pour garder l'interface reactive pendant les operations lourdes.

Analogie

Comme un panneau 'en cours de renovation' : les clients voient l'ancien decor pendant que tu renoves en arriere-plan.

Exemple de code

const [isPending, startTransition] = useTransition();

function handleSearch(query) {
  startTransition(() => {
    setFilteredResults(heavyFilter(query));
  });
}
// isPending = true pendant le calcul

Cas d'usage

Filtrage de longues listes, navigation entre onglets, tout ce qui peut bloquer l'interface.

Anti-pattern

Envelopper des mises a jour urgentes (saisie de texte) dans startTransition, rendant l'input laggy.
#hooks#interview#performance#react18