Section courante

A propos

Section administrative du site

useTransition

 Utilise la transition
React

Description

useTransition est un crochet React vous permettant de restituer une partie de l'interface utilisateur en arrière-plan.

const [isPending, startTransition] = useTransition()

Référence

useTransition()

Appelez useTransition au niveau supérieur de votre composante pour marquer certaines mises à jour d'état comme des transitions.

  1. import { useTransition } from 'react';
  2.  
  3. function TabContainer() {
  4.   const [isPending, startTransition] = useTransition();
  5.   // ...
  6. }

Paramètres

useTransition ne prend aucun paramètre.

Renvoie

useTransition renvoie un tableau contenant exactement deux éléments :

startTransition(action)

La fonction startTransition renvoyée par useTransition permet de marquer une mise à jour comme transition.

  1. function TabContainer() {
  2.   const [isPending, startTransition] = useTransition();
  3.   const [tab, setTab] = useState('about');
  4.  
  5.   function selectTab(nextTab) {
  6.     startTransition(() => {
  7.       setTab(nextTab);
  8.     });
  9.   }
  10.   // ...
  11. }

Remarque

Les fonctions appelées dans startTransition sont appelées «Actions».

La fonction passée à startTransition est appelée « Action ». Par convention, tout rappel appelé dans startTransition (comme une propriété de rappel) doit être nommé action ou inclure le suffixe «Action» :

  1. function SubmitButton({ submitAction }) {
  2.   const [isPending, startTransition] = useTransition();
  3.  
  4.   return (
  5.     <button
  6.       disabled={isPending}
  7.       onClick={() => {
  8.         startTransition(async () => {
  9.           await submitAction();
  10.         });
  11.       }}
  12.     >
  13.       Submit
  14.     </button>
  15.   );
  16. }

Paramètres

Nom Description
action Fonction mettant à jour un état en appelant une ou plusieurs fonctions set. React appelle action immédiatement, sans paramètre, et marque toutes les mises à jour d'état planifiées de manière synchrone pendant l'appel de la fonction action comme des transitions. Tous les appels asynchrones attendus dans l'action seront inclus dans la transition, mais nécessitent actuellement d'encapsuler les fonctions set après await dans une startTransition supplémentaire (voir Dépannage). Les mises à jour d'état marquées comme transitions seront non bloquantes et n'afficheront pas d'indicateurs de chargement indésirables.

Renvois

startTransition ne renvoie rien.

Avertissements

Utilisation

Effectuer des mises à jour non bloquantes avec des actions

Appelez useTransition en haut de votre composante pour créer des actions et accéder à l'état en attente :

  1. import {useState, useTransition} from 'react';
  2.  
  3. function CheckoutForm() {
  4.   const [isPending, startTransition] = useTransition();
  5.   // ...
  6. }

useTransition renvoie un tableau contenant exactement deux éléments :

Pour démarrer une transition, transmettez une fonction à startTransition comme ceci :

  1. import {useState, useTransition} from 'react';
  2. import {updateQuantity} from './api';
  3.  
  4. function CheckoutForm() {
  5.   const [isPending, startTransition] = useTransition();
  6.   const [quantity, setQuantity] = useState(1);
  7.  
  8.   function onSubmit(newQuantity) {
  9.     startTransition(async function () {
  10.       const savedQuantity = await updateQuantity(newQuantity);
  11.       startTransition(() => {
  12.         setQuantity(savedQuantity);
  13.       });
  14.     });
  15.   }
  16.   // ...
  17. }

La fonction passée à startTransition est appelée « Action ». Vous pouvez mettre à jour l'état et (éventuellement) appliquer des effets secondaires au sein d'une action. Le travail s'effectue en arrière-plan sans bloquer les interactions utilisateur sur la page. Une transition peut inclure plusieurs actions et, pendant son déroulement, votre interface utilisateur reste réactive. Par exemple, si l'utilisateur clique sur un onglet, puis change d'avis et clique sur un autre, le second clic est immédiatement traité sans attendre la fin de la première mise à jour.

Pour informer l'utilisateur des transitions en cours, l'état «isPending» passe à «true» lors du premier appel à startTransition et reste vrai jusqu'à la fin de toutes les actions et l'affichage de l'état final. Les transitions garantissent des effets secondaires dans les actions à terminer afin d'éviter les indicateurs de chargement indésirables. Vous pouvez également fournir un retour immédiat pendant la transition avec useOptimistic.



Dernière mise à jour : Mercredi, le 10 septembre 2025