startTransition

startTransition(scope)

• Référence
  • startTransition(scope)
• Utilisation
  • Marquer une mise à jour d’état comme étant une transition non bloquante

Référence

startTransition(scope)

La fonction startTransition vous permet de marquer une mise à jour d’état comme étant une transition.

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Voir d’autres exemples ci-dessous.

Paramètres

• scope : une fonction qui met à jour l’état en appelant au moins une fonction set. React appelle immédiatement scope sans argument et marque toutes les mises à jour d’état demandées durant l’exécution synchrone de scope comme des transitions. Elles seront non bloquantes et n’afficheront pas d’indicateurs de chargement indésirables.

Valeur renvoyée

startTransition ne renvoie rien.

Limitations

• startTransition ne fournit pas de moyen de surveiller la progression de la transition. Pour afficher un indicateur pendant que la transition a lieu, utilisez plutôt useTransition.

• Vous pouvez enrober une mise à jour dans une transition uniquement si vous avez accès à la fonction set de l’état en question. Si vous souhaitez démarrer une transition en réaction à une prop ou à la valeur renvoyée par un Hook personnalisé, utilisez plutôt useDeferredValue.

• La fonction que vous passez à startTransition doit être synchrone. React exécute cette fonction immédiatement, et marque toutes les mises à jour demandées lors de son exécution comme des transitions. Si vous essayez de faire des mises à jour d’état plus tard (par exemple avec un timer), elles ne seront pas marquées comme des transitions.

• Une mise à jour d’état marquée comme une transition pourra être interrompue par d’autres mises à jour d’état. Par exemple, si vous mettez à jour un composant de graphe au sein d’une transition, mais commencez alors une saisie dans un champ texte tandis que le graphe est en train de refaire son rendu, React redémarrera le rendu du composant graphe après avoir traité la mise à jour d’état du champ.

• Les mises à jour en transition ne peuvent pas être utilisées pour contrôler des champs textuels.

• Si plusieurs transitions sont en cours, React les regroupe pour le moment. Cette limitation sera sans doute levée dans une future version.

Utilisation

Marquer une mise à jour d’état comme étant une transition non bloquante

Vous pouvez indiquer qu’une mise à jour d’état doit être traitée comme une transition en l’enrobant dans un appel à startTransition :

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Les transitions vous permettent de conserver des mises à jour d’interface utilisateur réactives même sur des appareils lents.

Avec une transition, votre UI reste réactive pendant le rendu. Par exemple, si l’utilisateur clique sur un onglet mais ensuite change d’avis et va sur un autre onglet, il peut le faire sans devoir d’abord attendre que le premier onglet ait fini son rendu.