L'équipe de React a annoncé mardi la disponibilité générale de React 18. Cette nouvelle version majeure de la bibliothèque JavaScript comprend des améliorations prêtes à l'emploi comme le traitement par lots automatique, de nouvelles API comme useTransition et startTransition, et la prise en charge de Suspense. Plusieurs fonctionnalités de React 18 sont construites sur le nouveau moteur de rendu "Concurrent", un changement en coulisses qui débloque de nouvelles capacités puissantes. Concurrent React est opt-in, ce qui signifie qu'il n'est activé que lorsque vous utilisez une fonctionnalité "concurrent" (simultanée).Qu'est-ce que Concurrent React ?
Le mode "simultané" ou tout simplement "la simultanéité" (concurrency) n'est pas une fonctionnalité en soi. Il s'agit d'un nouveau mécanisme en coulisses qui permet à React de préparer plusieurs versions de votre interface utilisateur en même temps. Vous pouvez considérer la simultanéité comme un détail d'implémentation - elle est précieuse en raison des fonctionnalités qu'elle débloque. Selon l'équipe, React utilise des techniques sophistiquées dans son implémentation interne, comme les files d'attente prioritaires et la mise en mémoire tampon multiple. Mais elle ajoute que vous ne verrez ces concepts nulle part dans ses API publiques.
En gros, le mode simultané est un ensemble de nouvelles fonctionnalités qui aident les applications React à rester réactives et à s'adapter gracieusement aux capacités de l'appareil de l'utilisateur et à la vitesse du réseau. Ces fonctionnalités étaient jusqu'à présent expérimentales, mais viennent d'être ajoutées à la version stable de React 18. « L'ajout le plus important de React 18 est une chose à laquelle nous espérons que vous n'aurez jamais à penser : la simultanéité. Nous pensons que cela est largement vrai pour les développeurs d'applications, bien que l'histoire puisse être un peu plus compliquée pour les mainteneurs de bibliothèques », a déclaré l'équipe.
Selon elle, une propriété clé de Concurrent React est que le rendu peut être interrompu. Lors de la première mise à niveau vers React 18, avant l'ajout de fonctionnalité simultanée, les mises à jour sont rendues de la même manière que dans les versions précédentes de React - dans une transaction unique, ininterrompue et synchrone. Avec le rendu synchrone, une fois qu'une mise à jour commence à être rendue, rien ne peut l'interrompre jusqu'à ce que l'utilisateur puisse voir le résultat à l'écran. Dans un rendu simultané, ce n'est pas toujours le cas. React peut commencer le rendu d'une mise à jour, faire une pause au milieu, puis continuer plus tard.
D'après l'équipe, React peut même abandonner complètement un rendu en cours. Toutefois, il garantit que l'interface utilisateur apparaîtra cohérente même si le rendu est interrompu. Pour ce faire, React attend d'effectuer les mutations DOM jusqu'à la fin, une fois que l'arbre entier a été évalué. Grâce à cette capacité, React peut préparer de nouveaux écrans en arrière-plan sans bloquer le thread principal. Cela signifie que l'interface utilisateur peut répondre immédiatement aux entrées de l'utilisateur, même si elle se trouve au milieu d'une tâche de rendu importante, créant ainsi une expérience utilisateur fluide.
Un autre exemple est l'état réutilisable. Concurrent React peut supprimer des sections de l'interface utilisateur de l'écran, puis les réintroduire plus tard en réutilisant l'état précédent. Par exemple, lorsqu'un utilisateur s'éloigne d'un écran et y revient, React devrait être capable de restaurer l'écran précédent dans le même état qu'avant. Dans une prochaine version mineure, l'équipe prévoit d'ajouter un nouveau composant appelé Offscreen qui met en œuvre ce modèle. De même, vous serez en mesure d'utiliser Offscreen pour préparer une nouvelle interface utilisateur en arrière-plan afin qu'elle soit prête avant que l'utilisateur ne la révèle.
« Le rendu simultané est un nouvel outil puissant dans React et la plupart de nos nouvelles fonctionnalités sont conçues pour en tirer parti, notamment Suspense, les transitions et le rendu de serveur en continu. Mais React 18 n'est que le début de ce que nous voulons construire sur cette nouvelle base », a déclaré l'équipe. Enfin, il est important de noter que le rendu simultané est un changement de rupture. Le rendu simultané pouvant être interrompu, les composants se comportent légèrement différemment lorsqu'il est activé.
Suspense dans les frameworks de données
Dans React 18, vous pouvez commencer à utiliser Suspense pour la récupération de données dans des frameworks de données comme Relay, Next.js, Hydrogen ou Remix. Selon l'équipe, la récupération de données ad hoc avec Suspense est techniquement possible, mais n'est toujours pas recommandée comme stratégie générale. Elle estime que Suspense fonctionne mieux lorsqu'il est profondément intégré à l'architecture de votre application : routeur, couche de données et environnement de rendu du serveur. Ainsi, même à long terme, elle s'attend à ce que les bibliothèques et les frameworks jouent un rôle crucial dans l'écosystème React.
Comme dans les versions précédentes de React, vous pouvez également utiliser Suspense pour diviser le code sur le client avec React.lazy. Mais l'équipe a déclaré que sa vision pour Suspense a toujours été bien plus que le chargement de code - l'objectif est d'étendre le support de Suspense de sorte qu'à terme, le même fallback déclaratif de Suspense puisse gérer toute opération asynchrone (chargement de code, de données, d'images, etc.).
Server Components est toujours en cours de développement
Selon l'équipe, Server Components est une fonctionnalité à venir qui permet aux développeurs de créer des applications qui s'étendent du serveur au client, en combinant la riche interactivité des applications côté client avec les performances améliorées du rendu traditionnel du serveur. Server Components n'est pas intrinsèquement couplé à Concurrent React, mais il est conçu pour fonctionner au mieux avec des fonctionnalités simultanées comme Suspense et le rendu serveur en continu.
Server Components est encore expérimental, mais l'équipe prévoit de publier une version initiale dans une version mineure 18.x. En attendant, elle a déclaré qu'elle travaille avec des frameworks tels que Next.js, Hydrogen et Remix pour faire avancer la proposition et la préparer à une large adoption.
D'autres nouveautés clés dans React 18
Le traitement par lots est activé par défaut
React 18 ajoute des améliorations de performance prêtes à l'emploi en faisant plus de traitements par lots par défaut, supprimant le besoin de mettre en lots manuellement les mises à jour dans le code de l'application ou de la bibliothèque. Pour rappel, le traitement par lots consiste pour React à regrouper plusieurs mises à jour d'état en un seul rendu pour améliorer les performances. Par exemple, si vous avez deux mises à jour d'état dans le même événement de clic, React a toujours regroupé ces mises à jour en un seul rendu. C'est excellent pour les performances, car cela évite les rendus inutiles.
Cela évite également à votre composant d'effectuer un rendu d'états "semi-finis" où une seule variable d'état a été mise à jour, ce qui peut provoquer des bogues. Mais selon l'équipe, React n'est pas cohérent quant au moment où il regroupe les mises à jour. Sans la mise en lot automatique, vous ne mettez en lot que les mises à jour dans les gestionnaires d'événements React. Les mises à jour à l'intérieur des promises, setTimeout, les gestionnaires d'événements natifs, ou tout autre événement n'étaient pas mis en lot dans React par défaut. À partir de React 18, toutes les mises à jour seront automatiquement mises en lots, quelle que soit leur origine.
| Code JavaScript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Before: only React events were batched. setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // React will render twice, once for each state update (no batching) }, 1000); // After: updates inside of timeouts, promises, // native event handlers or any other event are batched.` setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // React will only re-render once at the end (that's batching!) }, 1000); |
Cela signifie que les mises à jour à l'intérieur des timeouts, des promises, des gestionnaires d'événements natifs ou de tout autre événement seront mises en lots de la même manière que les mises à jour à l'intérieur des événements React. L'équipe a déclaré qu'elle s'attend à ce que cela se traduise par une diminution du travail de rendu et donc par une amélioration des performances de vos applications.
Les transitions
Selon l'équipe, une transition est un nouveau concept dans React pour distinguer les mises à jour urgentes et non urgentes.
- les mises à jour urgentes reflètent une interaction directe, comme taper, cliquer, appuyer, etc. ;
- les mises à jour de transition font passer l'interface utilisateur d'une vue à une autre.
Les mises à jour urgentes, comme la frappe, le clic ou la pression, nécessitent une réponse immédiate pour correspondre à nos intuitions sur le comportement des objets physiques. Sinon, elles sont ressenties comme "erronées". Cependant, les transitions sont différentes, car l'utilisateur ne s'attend pas à voir chaque valeur intermédiaire à l'écran. Par exemple, lorsque vous sélectionnez un filtre dans une liste déroulante, vous vous attendez à ce que le bouton du filtre réagisse immédiatement lorsque vous cliquez dessus. Cependant, les résultats réels peuvent passer séparément.
Un petit retard serait imperceptible et souvent attendu. Et si vous changez à nouveau le filtre avant que les résultats ne soient rendus, vous ne verrez que les derniers résultats. En général, pour une expérience utilisateur optimale, une seule entrée utilisateur doit entraîner à la fois une mise à jour urgente et transition. Vous pouvez utiliser l'API startTransition à l'intérieur d'un événement de saisie pour indiquer à React quelles mises à jour sont urgentes et lesquelles sont des "transitions" :
| Code JavaScript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | import {startTransition} from 'react'; // Urgent: Show what was typed setInputValue(input); // Mark any state updates inside as transitions startTransition(() => { // Transition: Show the results setSearchQuery(input); }); |
Les mises à jour enveloppées dans startTransition sont traitées comme non urgentes et seront interrompues si des mises à jour plus urgentes comme des clics ou des pressions de touches arrivent. Si une transition est interrompue par l'utilisateur (par exemple, en tapant plusieurs caractères à la suite), React rejettera le travail de rendu périmé qui n'était pas terminé et ne rendra que la dernière mise à jour.
useTransition : un hook pour démarrer les transitions, incluant une valeur pour suivre l'état en attente ;
startTransition : une méthode pour démarrer les transitions lorsque le crochet ne peut pas être utilisé.
Les transitions opteront pour le rendu simultané, ce qui permet d'interrompre la mise à jour. Si le contenu est à nouveau suspendu, les transitions indiquent également à React de continuer à afficher le contenu actuel tout en rendant le contenu de transition en arrière-plan.
Nouvelles fonctionnalités de Suspense
Suspense vous permet de spécifier de manière déclarative l'état de chargement d'une partie de l'arbre des composants si elle n'est pas encore prête à être affichée :
| Code JavaScript : | Sélectionner tout |
1 2 3 | <Suspense fallback={<Spinner />}> <Comments /> </Suspense> |
Suspense fait de "l'état de chargement de l'interface utilisateur" un concept déclaratif de première classe dans le modèle de programmation React. « Cela nous permet de construire des fonctionnalités de plus haut niveau par-dessus. Nous avons présenté une version limitée de Suspense il y a plusieurs années. Cependant, le seul cas d'utilisation pris en charge était le fractionnement du code avec React.lazy, et il n'était pas du tout pris en charge lors du rendu sur le serveur », a déclaré l'équipe. Dans React 18, elle a ajouté la prise en charge de Suspense sur le serveur et étendu ses capacités en utilisant des fonctionnalités de rendu simultané.
Selon elle, Suspense fonctionne mieux dans React 18 lorsqu'il est combiné avec l'API de transition. Si vous suspendez pendant une transition, React empêchera le contenu déjà visible d'être remplacé par un fallback. Au lieu de cela, React retardera le rendu jusqu'à ce que suffisamment de données aient été chargées pour éviter un mauvais état de chargement.
Nouvelles API de rendu client et serveur
Dans cette version, l'équipe a déclaré avoir remanié les API qu'elle expose pour le rendu sur le client et le serveur. Ces changements devraient permettre aux utilisateurs de continuer à utiliser les anciennes API en mode React 17 tout en effectuant une mise à niveau vers les nouvelles API de React 18.
React DOM Client
Ces nouvelles API sont maintenant exportées depuis react-dom/client :
- createRoot : nouvelle méthode pour créer une racine à rendre ou à démonter. Selon l'équipe, pouvez l'utiliser à la place de ReactDOM.render. Les nouvelles fonctionnalités de React 18 ne fonctionnent pas sans elle ;
- hydrateRoot : nouvelle méthode pour hydrater une application rendue par un serveur. Vous pouvez l'utiliser à la place de ReactDOM.hydrate en conjonction avec les nouvelles API React DOM Server. Les nouvelles fonctionnalités de React 18 ne fonctionnent pas sans elle.
En outre, createRoot et hydrateRoot acceptent une nouvelle option appelée onRecoverableError dans le cas où vous souhaitez être notifié lorsque React récupère des erreurs pendant le rendu ou l'hydratation pour la journalisation. Par défaut, React utilisera reportError, ou console.error dans les anciens navigateurs.
React DOM Server
Ces nouvelles API sont maintenant exportées depuis [C=JavaScript]react-dom/server[/B] et ont un support complet pour Suspense sur le serveur :
- renderToPipeableStream : pour le rendu en continu dans les environnements Node ;
- renderToReadableStream : pour les environnements d'exécution modernes, tels que les workers Deno et Cloudflare.
La méthode existante renderToString continue de fonctionner, mais est déconseillée.
Nouveaux hooks
useId
useId est un nouveau hook permettant de générer des identifiants uniques à la fois sur le client et le serveur, tout en évitant les décalages d'hydratation. Il est principalement utile pour les bibliothèques de composants intégrant des API d'accessibilité qui nécessitent des identifiants uniques. Cela résout un problème qui existe déjà dans React 17 et inférieur, mais c'est encore plus important dans React 18 en raison de la façon dont le nouveau serveur de rendu en continu fournit du HTML.
useTransition
useTransition et startTransition vous permettent de marquer certaines mises à jour d'état comme non urgentes. Les autres mises à jour d'état sont considérées comme urgentes par défaut. React permettra aux mises à jour d'état urgentes (par exemple, la mise à jour d'une entrée de texte) d'interrompre les mises à jour d'état non urgentes (par exemple, le rendu d'une liste de résultats de recherche).
useDeferredValue
useDeferredValue vous permet de différer le nouveau rendu d'une partie non urgente de l'arbre. Cette méthode est similaire au débruitage, mais présente quelques avantages par rapport à celui-ci. Il n'y a pas de délai fixe, donc React tentera le rendu différé juste après que le premier rendu soit reflété à l'écran. Le rendu différé est interruptible et ne bloque pas l'entrée de l'utilisateur.
useSyncExternalStore
useSyncExternalStore est un nouveau hook qui permet aux magasins externes de supporter les lectures simultanées en forçant les mises à jour du magasin à être synchrones. Il supprime le besoin d'utiliser useEffect lors de l'implémentation d'abonnements à des sources de données externes, et est recommandé pour toute bibliothèque qui s'intègre à un état externe à React. Notez que useSyncExternalStore est destiné à être utilisé par les bibliothèques, pas par le code de l'application.
useInsertionEffect
useInsertionEffect est un nouveau hook qui permet aux bibliothèques CSS-in-JS de résoudre les problèmes de performance liés à l'injection de styles dans le rendu. Ce hook sera exécuté après la mutation du DOM, mais avant que les effets de layout ne lisent le nouveau design. Cela résout un problème qui existe déjà dans React 17 et inférieur, mais qui est encore plus important dans React 18 parce que React cède au navigateur pendant le rendu simultané, lui donnant une chance de recalculer le design. Notez que useInsertionEffect est destiné à être utilisé par des bibliothèques, et non par du code d'application.
Source : React 18
Et vous ?
Que pensez-vous des nouveautés introduites dans React 18 ?Voir aussi
State of JavaScript 2021 : React reste de loin le framework front-end le plus utilisé par les développeurs, mais en terme de satisfaction il est éclipsé par Solid et Svelte React : la version 16.8 de la bibliothèque JavaScript est disponible et embarque une version stable des Hooks Microsoft explique pourquoi il s'est servi de React Native pour Windows sur l'application Paramètres de Windows 11 pour fournir la page "Votre compte Microsoft" La release candidate de React 17.0 est disponible, n'apporte aucune nouvelle fonctionnalité, mais jette les bases d'une nouvelle méthode d'adoption des mises à jour