Explorer les principales fonctionnalités de React 19 / Blogs / Perficient

Réagir 19 apporte un nouvel ensemble d’améliorations et de fonctionnalités visant à offrir de meilleures performances. Dans cet article, je présenterai certaines de ces nouvelles fonctionnalités telles que les composants serveur, les fonctions serveur, les nouveaux hooks comme utiliser, utiliserActionState et utiliserOptimiste.

React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur. Il utilise une approche déclarative pour créer des composants d’interface utilisateur réutilisables, facilitant ainsi la gestion des états, la gestion des interfaces utilisateur complexes et la création d’applications Web interactives et dynamiques.

Nous utiliserons une petite application TODO (pas l’exemple le plus original, mais qui fait le travail) initialement construite dans React 18, pour illustrer comment ces nouvelles fonctionnalités entrent en jeu dans React 19. J’ai choisi Next.js 15 comme le cadre de cette version mise à jour de notre application, car il prend en charge de manière transparente les composants du serveur et accélérera notre processus de développement.

Transition de la récupération côté client vers les composants serveur

Dans React 18, la récupération de données implique souvent l’utilisation de hooks useEffect et de plusieurs éléments d’état : un pour les données, un autre pour le chargement et potentiellement un autre pour la gestion des erreurs. Voici un exemple de notre composant de tableau de bord TODO écrit dans React 18, s’appuyant fortement sur useEffect pour récupérer les données du serveur :

Bien que cela fonctionne, cela nous oblige à gérer plusieurs états côté client. Tout retard dans la récupération des données entraîne des états de chargement sur le client, et la logique de gestion des erreurs est également liée au client.

Entrez les composants du serveur :

Avec Composants du serveur React 19nous pouvons simplifier ce processus. Au lieu de récupérer les données dans un hook useEffect sur le client, nous pouvons transférer cette responsabilité au serveur. Cette approche réduit la quantité d’état que nous devons maintenir sur le client et améliore souvent les performances de chargement initial des pages.

La première chose que nous remarquons maintenant, c’est que les composants du serveur peuvent être définis comme des fonctions asynchrones. Cela signifie que vous pouvez attendre vos appels de récupération de données directement dans le corps du composant – pas besoin d’utiliser useEffect ou de gérer des états de chargement séparés côté client. Une fois la promesse résolue, vous transmettez vos données aux composants enfants qui peuvent être des composants serveur ou client.

Ce qui se passe?

• En attente de données sur le serveur : Les données sont déjà disponibles au moment où le client reçoit le HTML, il n’y a donc pas d’état de « chargement » côté client.
• Complexité réduite côté client : Nous n’avons plus besoin de hooks useEffect ou de variables useState supplémentaires pour gérer la récupération, le chargement ou les états d’erreur sur le client.
• Performances et expérience utilisateur améliorées : L’utilisateur voit le contenu immédiatement lors du chargement de la page (une fois la récupération terminée par le serveur), ce qui se traduit par des performances perçues plus rapides et une expérience globale plus fluide.

Si vous comparez le chargement initial de la page pour les deux versions de nos applications, vous remarquerez que nous n’avons plus l’état de chargement, pendant que nous récupérons la liste des TODO.

Dans la version précédente de React, la première page chargée dans le navigateur était une page vierge. Vous pouvez vérifier que c’est le cas en visualisant le code source de la page que les navigateurs reçoivent :

Lorsque nous inspectons le code source dans le navigateur de notre nouveau composant serveur, nous pouvons voir le contenu HTML entièrement rendu de la page, exactement ce que l’utilisateur voit immédiatement après le chargement de la page. Pour plus de clarté, j’ai supprimé les classes CSS et SVG pour faciliter la lecture.

Remarque : Nous pourrions consacrer un article de blog entier uniquement à la discussion sur les composants serveur (et je le ferai probablement à l’avenir), mais pour l’instant, il y a un détail important à souligner : même si vous marquez un composant comme composant client avec la directive use client, le serveur le restituera toujours lors du chargement initial de la page. En d’autres termes, le serveur envoie le code HTML entièrement rendu pour ce composant avant qu’il n’atteigne le navigateur. Le simple fait de le marquer comme composant client n’empêche pas le serveur de générer le code HTML initial.

La directive use client garantit que tout le JavaScript nécessaire à l’interactivité, tel que les gestionnaires onClick, les hooks useEffect ou toute logique de navigateur uniquement, est regroupé et livré au client. Une fois que le serveur a envoyé le code HTML initial, le navigateur « hydrate » la page en attachant des écouteurs d’événements et en exécutant n’importe quel code côté client. Ce processus donne vie à l’interface utilisateur, permettant des mises à jour dynamiques et des interactions utilisateur.

L’essentiel à retenir est que les composants serveur et client démarrent sous forme de code HTML entièrement rendu à partir du serveur. Les composants clients gagnent alors en interactivité une fois que le navigateur a fini de s’hydrater, comblant ainsi le fossé entre le balisage statique et les interfaces dynamiques et réactives pour lesquelles React est connu.

Présentation du crochet use().

Attendre l’appel getTodos() dans notre composant serveur est pratique, mais cela n’améliore pas de manière significative une mesure de performance clé : le Largest Contentful Paint (LCP). Dans notre configuration actuelle, l’application prend environ 1,28 seconde avant d’afficher un contenu significatif à l’utilisateur.

À quoi sert le crochet() ?

Le crochet use() est une nouvelle fonctionnalité de React 19 qui vous permet d’intégrer des données asynchrones directement dans les composants du serveur sans bloquer l’intégralité du rendu. Au lieu d’attendre le chargement des données avant d’envoyer une interface utilisateur au client, use() vous permet de restituer immédiatement ce que vous pouvez, pendant que les données en attente sont résolues en arrière-plan.

Comment ça marche ?

• Chargement asynchrone : Lorsque vous encapsulez une fonction de retour de promesse avec use(), React sait que cette donnée est toujours en cours de chargement et peut commencer à restituer d’autres parties de l’interface utilisateur.
• Intégration du suspense : Combiné avec les limites Suspense, use() affiche le contenu de secours jusqu’à ce que les données asynchrones soient prêtes. Une fois les données résolues, React met à jour l’interface utilisateur de manière transparente.
• Meilleures performances et vitesse perçue : En ne retardant pas le rendu initial, use() améliore le Largest Contentful Paint (LCP) et rend votre application plus vive. Les utilisateurs voient plus tôt quelque chose de significatif à l’écran, ce qui améliore leur expérience.

En tirant parti de use(), nous pouvons commencer à rendre la page sans attendre la fin de l’ensemble du processus de récupération des données. Cela signifie que les utilisateurs voient le contenu initial plus tôt, améliorant à la fois les performances perçues et l’expérience utilisateur globale.

Voici une façon dont nous pouvons utiliser cette nouvelle fonctionnalité.

Dans notre composant serveur, nous commençons à récupérer la liste des tâches, mais nous n’attendons pas la promesse pour résoudre. Nous transmettons l’accessoire à notre tableau de bord :

Le composant du tableau de bord enveloppe la promesse avec le nouveau hook et suspendra ce composant jusqu’à ce que la promesse soit résolue.

Pendant que cette promesse est en attente, la limite Suspense dans notre composant serveur affiche une interface utilisateur ou un état de chargement de secours, et l’utilisateur reçoit une réponse plus rapide lorsqu’il accède à notre application.

Présentation des fonctions du serveur :

Maintenant que notre composant serveur est opérationnel et que nous optimisons notre récupération initiale et notre chargement de page. Nous pouvons également réduire la quantité de code javascript que nous envoyons au navigateur, améliorant ainsi les performances et la sécurité.

À l’heure actuelle, les fonctions permettant d’ajouter, de supprimer et de désactiver les états TODO sont envoyées au client pour qu’il puisse s’exécuter et s’exécuter.

Fonctions du serveur dans React 19 vous permettent d’exécuter certaines logiques exclusivement sur le serveur, puis d’intégrer de manière transparente les résultats dans vos composants.

Comment fonctionnent les fonctions du serveur ?

• Exécution sur serveur uniquement : Les fonctions du serveur ne sont jamais livrées au client. Ils sont invoqués sur le serveur, vous permettant d’effectuer des opérations sur les données, des calculs complexes ou une logique sensible (comme la gestion de variables d’environnement ou de jetons sécurisés) dont vous ne souhaitez pas dans le navigateur de l’utilisateur.
• Intégration transparente avec les composants : Vous pouvez appeler directement les fonctions du serveur au sein des composants du serveur, simplifiant ainsi votre flux de données et votre structure de code.

Avantages:

• Sécurité: La logique sensible reste sur le serveur, sans jamais exposer de secrets au client.
• Performance: Le déchargement du travail sur le serveur réduit les frais généraux côté client.
• Architecture propre : Le code de votre application peut devenir plus propre et plus maintenable.

Le composant Serveur peut définir des fonctions Serveur avec la directive ‘use server’ :

Maintenant, quand nous ajouter, supprimerou basculer l’un de nos Todos, vous remarquerez que chacune de ces actions déclenche une requête POST au serveur. Cette demande appelle un fonction serveur pour exécuter l’opération souhaitée et renvoie le résultat mis à jour au navigateur.

Sur ma configuration locale, cela ressemble à ceci :

Présentation de useActionState

La gestion des états de formulaire comme isAdding peut rapidement devenir fastidieuse, surtout à mesure que votre application se développe. Vous vous retrouvez souvent à créer plusieurs variables d’état ou à les percer sur plusieurs composants. React 19 simplifie cela avec le nouveau hook useActionState.

utiliserActionState vous permet de suivre directement l’état d’une fonction serveur, sans avoir besoin de gérer manuellement des variables d’état supplémentaires

Dans notre exemple d’application, nous pouvons éliminer la prop isAdding et gérer l’état de chargement de manière transparente avec useActionState et la prop action dans l’élément HTML Form.

Soyons plus optimistes.

Dans notre application, nous pouvons ajouter, supprimer et basculer des tâches, mais pour le moment, nous attendons que les mutations soient résolues sur le backend avant de mettre à jour l’interface utilisateur. Pour rendre ce délai plus visible dans le cadre de cet exercice, j’ai ajouté des délais artificiels à chaque action. Cela soulève une question importante : comment pouvons-nous faire en sorte que notre application réagisse plus rapidement aux actions des utilisateurs ?

Entrez useOptimistic, un hook React 19 conçu spécifiquement à cet effet. Les mises à jour optimistes vous permettent de refléter immédiatement les modifications apportées à votre interface utilisateur sans attendre que le serveur les confirme. Cela crée une expérience plus fluide et plus réactive pour les utilisateurs, car ils n’ont plus besoin d’attendre les allers-retours du serveur pour voir le résultat de leurs actions.

Comment fonctionne useOptimistic ?

utiliserOptimiste fournit un moyen simple de gérer l’état optimiste :

• État initial : Vous fournissez l’état initial du composant.
• Fonction réducteur : Vous définissez une fonction de réduction qui prend l’état actuel et les données d’action, puis calcule l’état optimiste.
• Mises à jour de l’état : React applique temporairement l’état optimiste pendant que l’opération du serveur s’exécute en arrière-plan. Si l’opération réussit, l’état est finalisé ; en cas d’échec, React revient à l’état précédent.

Pour utiliser useOptimistic, on commence par créer un réducteur pour centraliser toutes les actions que l’on peut réaliser sur nos todos. Cela facilite la gestion des mises à jour et garantit que notre interface utilisateur est rapide et réactive.

Ensuite, nous créons notre état optimiste. Cet état utilisera le hook useOptimistic, avec l’état initial défini sur les tâches reçues du serveur. L’état optimiste sert de source actuelle de vérité pour notre interface utilisateur, reflétant à la fois l’état confirmé du serveur et tout changement optimiste que nous appliquons localement.

L’état initial fournit une référence : il s’agit de l’état des tâches telles qu’elles sont récupérées depuis le backend. À partir de là, toute action de l’utilisateur, telle que l’ajout, la suppression ou le basculement d’une tâche, mettra temporairement à jour cet état optimiste en attendant que le serveur traite la mutation correspondante. Si le serveur confirme l’opération, l’état demeure ; sinon, il revient à l’état initial.

Conclusion

Dans cet article, nous avons exploré certaines des nouvelles fonctionnalités les plus importantes de React 19, en nous concentrant sur des fonctionnalités telles que use(), useActionState, useOptimistic et les composants serveur. Ces mises à jour améliorent non seulement les performances, mais simplifient également le développement en réduisant le passe-partout et en rationalisant les flux de travail.

Bien entendu, React 19 apporte encore plus de fonctionnalités et d’améliorations au-delà de ce que nous avons couvert ici. Je vous encourage à approfondir les notes de version et à expérimenter ces nouveaux outils pour offrir de meilleures expériences à vos utilisateurs tout en rendant votre processus de développement plus efficace. Avec React 19, il n’a jamais été aussi simple d’écrire du code plus propre et plus maintenable.

Si vous souhaitez vivre une expérience pratique similaire ici est le référentiel que vous pouvez utiliser pour commencer la migration vers React 19.

Vous pouvez obtenir plus d’informations et d’excellents articles dans notre Blogues complets.