Jetez un œil à startTransition dans React 18

React 18 est livré avec plusieurs nouvelles fonctionnalités simultanées, notamment startTransition. Décrivons comment cela fonctionne et ce que vous pouvez en faire!

Jetons un coup d'œil à ce qui (je pense) sera l'une des parties les plus intéressantes de la prochaine version de React 18 : startTransition.

En un mot, startTransition est une nouvelle API dans React 18 qui va nous permettre de garder nos applications interactives et réactives, même lorsque de grosses mises à jour se produisent en coulisses. Auparavant, si un utilisateur initiait une action qui déclencherait la mise à jour d'un composant, telle qu'une recherche qui récupère une tonne de nouvelles données à afficher, la page entière se bloquerait pendant que tout ce chargement se produisait. Comme vous pouvez l'imaginer, cela semble un peu gênant pour les utilisateurs, donc en tant que développeurs, nous avons été obligés de trouver d'autres moyens de le contourner – des interfaces utilisateur squelettes pour rendre les charges plus rapides, anti-rebond, setTimeouts, etc.

Dans React, toutes les mises à jour sont rendues avec la même urgence – ou du moins, cela a été le cas jusqu'à React 18 et le rendu simultané. Cela signifiait qu'il n'y avait aucun moyen de différencier les mises à jour qui sont vraiment urgentes et nécessitent de tout mettre à jour immédiatement à chaque fois et les mises à jour moins urgentes, comme les résultats de recherche, qui ne devrait pas empêcher l'utilisateur de continuer à faire d'autres travaux sur la page pendant que le système le trie en arrière-plan.

Afin de bien comprendre setTransitionnous devons commencer par jeter un œil à un coupler les concepts fondamentaux – la nouvelle approche de rendu simultané dans React 18, et comment React définit une transition :

Tout d'abord, transitions. Cette formulation peut sembler un peu déroutante au début, car jusqu'à présent, le mot «transition» était principalement associé à des animations, comme CSS Transitions. Et, pour être juste, ce long jeu semble être au moins une partie de ce qu'ils avaient en tête lorsqu'ils ont nommé ce concept, du moins selon ce tweet de Dan.

En fait, il semble qu'il y ait de très bonnes choses liées à l'animation à venir… mais pas encore tout à fait. Ils mettent toutes les pièces en place avant de s'attaquer à un si gros projet, que je respecte vraiment.

concurrence : c'est un mot que vous entendez probablement déjà pas mal… et si vous ne l'êtes pas, alors préparez-vous, car le rendu simultané est une énorme partie de React 18!

À un niveau élevé, la simultanéité signifie essentiellement que les tâches peuvent se chevaucher. Plutôt qu'une mise à jour d'état devant être complètement terminée avant que le système puisse passer à la suivante, la simultanéité nous permet de rebondir entre les multiples. Il convient de noter que cela ne signifie pas que ces choses se produisent toutes en même temps – c'est plutôt qu'une tâche peut maintenant être suspendue tandis que d'autres tâches plus urgentes sont vues à. Ensuite, une fois les tâches les plus urgentes terminées, nous pouvons revenir à la tâche la moins urgente, en apportant avec nous les informations mises à jour des tâches les plus urgentes.

Ce que React 18 nous offre de donc cool, c'est la possibilité de travailler avec ce flux de simultanéité. Lorsque nous utilisons l'API startTransitionnous marquons certaines de nos actions les moins urgentes comme des « transitions », puis demandons à React de laisser d'autres actions plus urgentes avoir la priorité dans la chronologie de rendu.[19659005]Ce sera une mise à jour impressionnante d'un point de vue UX. Cela rendra les choses beaucoup plus vives et réactives pour l'utilisateur, tout en réduisant le travail que nous, en tant que développeurs, mettions en place, afin de minimiser ce point douloureux. En enveloppant ces mises à jour plus lentes et moins urgentes dans startTransitionnous pouvons essentiellement dire à React qu'il n'y a rien de mal à y accéder lorsqu'il n'est pas occupé par quelque chose de plus important.

Cela signifie que les transitions peuvent être interrompues par des mises à jour plus urgentes, et React jettera simplement le travail de rendu inachevé et désormais obsolète et passera directement aux nouvelles choses. Cela signifie également que nous ne serons jamais dans une situation où nous perdrons du temps à cause d'un composant qui rend des données obsolètes et inexactes. Ou, pire encore, lorsqu'un utilisateur se voit en fait montrer des informations qui ne sont pas correctes.

Alors, à quoi cela ressemblera-t-il dans votre code ? Franchement, c'est incroyablement facile – où que vous appeliez votre fonction pas si pressante auparavant, vous l'enveloppez maintenant littéralement dans startTransitioncomme ceci :

onChange = (e) => {
    const valeur = e.cible.valeur;
    startTransition(() => {
      nonUrgentAction(value);
     });
  };

Puisque votre page entière ne sera plus verrouillée en attendant ces longs processus, votre utilisateur pourrait même ne pas se rendre compte que quelque chose est toujours en cours de chargement !

Pour cette raison, il est également recommandé d'utiliser la valeur isPending qui sera également livrée avec React 18 dans le cadre du hook useTransition. Ce hook renvoie la fonction startTransitionainsi qu'une valeur isPending qui sera définie sur true pendant le rendu de votre transition. De cette façon, vous pouvez vérifier rapidement isPending pour déterminer si vous devez ou non ajuster votre interface utilisateur pour refléter le fait que la mise à jour n'est pas encore tout à fait prête, par exemple, en désactivant un bouton.[19659042]const [isPending, startTransition] = useTransition();

< Bouton className={isPending ? 'disabled' : 'active'} />

L'autre chose vraiment agréable à propos de setTransition (et de toute la version React 18, en fait) est que ce n'est pas un changement radical ! Parce que la définition des transitions est une action opt-in, ce qui signifie que vous devez faire tout votre possible pour déclarer une action en tant que transition en l'enveloppant dans setTransition par rapport à tout ce qui est défini automatiquement-votre code existant ne le fera pas. être touchés par ce changement. React 18 traitera toujours toutes les mises à jour comme urgentes par défaut, ce qui rend tout cela rétrocompatible. Mais, avec la facilité de mise en œuvre et le large éventail d'avantages, vous commencerez certainement à vouloir travailler startTransition dans vos projets dès que possible !