useTransition
React 🟡 MidDefinition
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.