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...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.