Les nouvelles fonctionnalités de React 19

Equipe Dyma -

Résumé des nouvelles fonctionnalités de React 19

Le 25 avril 2024 React 19 est entrée dans sa dernière ligne droite : une version Release Candidate est sortie !

React 19 introduit une multitude de nouvelles fonctionnalités et améliorations qui promettent de simplifier et d'optimiser le développement avec cette bibliothèque populaire. Voici un aperçu rapide des principales nouveautés pour les plus pressés d'entre vous :

  • React Compiler : un nouveau compilateur qui optimise automatiquement les re-rendus, éliminant le besoin d'utiliser manuellement useMemo(), useCallback(), et memo.
  • Server components et actions : possibilité d'exécuter des composants React côté serveur, améliorant les performances et l'optimisation SEO.
  • Actions : simplification de la gestion des mutations de données et des états des formulaires.
  • Web components : intégration facilitée des composants Web dans le code React.
  • Document metadata : gestion simplifiée des métadonnées de document, telles que les balises title et meta.
  • Asset loading : chargement optimisé des ressources en arrière-plan pour améliorer les temps de chargement et l'expérience utilisateur.
  • Nouveaux hooks :
    • use()
    • useFormStatus()
    • useActionState()
    • useOptimistic()
    • amélioration de useTransition()

Le nouveau compilateur de React 19

Le nouveau compilateur React est un outil expérimental open-source conçu pour optimiser automatiquement les applications React. Il est encore en développement mais est disponible pour l'essayer dans la version React 19 RC.

Le compilateur mémorise automatiquement les valeurs ou groupes de valeurs dans vos composants et hooks. Cela réduit le besoin d'utiliser useMemo, useCallback, et React.memo, et optimise les mises à jour de l'interface utilisateur.

Les Actions

Les Actions dans React 19 simplifient la gestion des mutations de données et des soumissions de formulaires en automatisant la gestion des états pendants, des erreurs, des mises à jour optimistes et des requêtes séquentielles.

Les Actions dans React 19 gèrent automatiquement :

  • État pendant : les actions fournissent un état pendant qui commence au début d'une requête et se réinitialise automatiquement lorsque la mise à jour finale de l'état est effectuée.
  • Mises à jour optimistes : elles supportent le hook useOptimistic pour montrer aux utilisateurs un retour instantané pendant que les requêtes sont en cours.
  • Gestion des erreurs : elles fournissent une gestion des erreurs pour afficher les erreurs de formulaire et rétablir les mises à jour optimistes à leur valeur initiale en cas d'échec.
  • Formulaires : les éléments <form> supportent désormais le passage de fonctions aux props action et formAction, ce qui utilise les Actions par défaut et réinitialise le formulaire automatiquement après la soumission.

Avant React 19, la gestion des états pendants et des erreurs dans un formulaire devait être réalisée manuellement. Voici un exemple de gestion manuelle des soumissions de formulaires :

Amélioration du hook useTransition

useTransition est un hook qui permet de gérer les transitions d'état asynchrones. Il est particulièrement utile pour différer les mises à jour moins prioritaires, garantissant ainsi que les mises à jour plus importantes restent réactives et fluides.

Avec React 19, il est maintenant possible d'utiliser des fonctions asynchrones dans les transitions pour gérer les états d'attente, les erreurs, les formulaires et les mises à jours optimistes automatiquement.

Voici un exemple simple pour comprendre l'utilisation de useTransition. Nous allons créer un formulaire de soumission de nom où l'appel asynchrone simule une vérification de nom. Si le nom est "error", une erreur sera simulée.

Le nouveau hook useActionState

Nous pouvons aller encore plus loin avec ce hook.

useActionState accepte une fonction (l'action) et un état initial. Il retourne un tableau contenant trois valeurs :

  1. L'erreur (ou le résultat) de l'action.
  2. Une fonction pour soumettre l'action.
  3. Un état indiquant si l'action est en cours (isPending).

useActionState permet donc de gérer les états pendants, les erreurs et les mises à jour optimistes en une seule fonction !

En utilisant useActionState, les développeurs peuvent écrire des composants plus propres et plus faciles à maintenir, tout en offrant une meilleure expérience utilisateur grâce à la gestion optimisée des états asynchrones.

Le nouveau hook useOptimistic

Le hook useOptimistic introduit dans React 19 permet de gérer plus facilement les mises à jour optimistes de l'interface utilisateur pendant une mutation de données asynchrones. Il permet d'afficher immédiatement l'état final attendu tout en attendant que la requête asynchrone soit terminée. Une fois la requête terminée ou échouée, React repasse automatiquement à la valeur initiale si nécessaire.

useOptimistic prend un état initial et une fonction de mise à jour optimiste. Il retourne une paire : l'état optimiste actuel et une fonction pour le mettre à jour.

Le nouveau hook useFormStatus

Le hook useFormStatus est une nouveauté dans React 19 qui permet de lire les informations sur l'état d'un formulaire parent sans avoir à passer des props en cascade. Ce hook est particulièrement utile dans les systèmes de design où les composants doivent connaître l'état du formulaire dans lequel ils se trouvent.

useFormStatus retourne un objet contenant plusieurs propriétés utiles :

  • pending : un booléen indiquant si le formulaire est en cours de soumission.
  • data : un objet FormData contenant les données soumises par le formulaire.
  • method : une chaîne de caractères indiquant la méthode HTTP utilisée pour la soumission (GET ou POST).
  • action : une référence à la fonction ou à l'URL passée à la prop action du formulaire parent.

Dans cet exemple, nous allons créer un formulaire qui affiche un indicateur de chargement pendant la soumission et désactive le bouton de soumission pour éviter des soumissions multiples.

Le nouveau hook use()

Le hook use est une nouvelle API introduite dans React 19 qui permet de lire des ressources dans le rendu. Par exemple, vous pouvez lire une promesse avec use, et React suspendra le rendu jusqu'à ce que la promesse soit résolue.

use simplifie la gestion des états de chargement et permet de structurer le code de manière plus naturelle. Contrairement à d'autres hooks, use peut être appelé conditionnellement, offrant ainsi plus de flexibilité dans la gestion des dépendances asynchrones et du contexte.

Nouvelles fonctionnalités de <form> <input> et <button>

Avec la version 19 de React, des améliorations ont été apportées aux composant <form> <input> et <button> de react-dom pour faciliter la gestion des soumissions de formulaires et améliorer l'interactivité des applications.

Voici un résumé des principales fonctionnalités, accompagné de quelques exemples pratiques :

  • Les actions peuvent être passées en tant que fonctions à la prop action des éléments <form>, <input>, et <button>.
  • Lorsqu'une action réussit, React réinitialise automatiquement le formulaire pour les composants non contrôlés.

Si nécessaire, vous pouvez réinitialiser manuellement le formulaire avec la nouvelle API requestFormReset de react-dom.

Server Components

Les Server Components permettent de rendre des composants à l'avance, avant le bundling, dans un environnement séparé de votre application cliente ou de votre serveur de rendu côté serveur (SSR).

Ces composants peuvent être construits :

  • lors du build de l'application, par exemple sur serveur CI (avec Gitlab CI/CD par exemple)
  • sur un serveur web pour chaque requête.

Pourquoi les utiliser ?

  • Amélioration des performances : les composants sont pré-rendus sur le serveur, ce qui réduit le temps de chargement initial.
  • SEO optimisé : les contenus rendus côté serveur sont mieux interprétés par les moteurs de recherche.

Exemple de Server Component avec serveur

Les Server Components peuvent également s'exécuter sur un serveur web pendant une requête pour une page, vous permettant d'accéder à votre couche de données sans avoir à créer une API.

Ils sont rendus avant que votre application ne soit bundlée et peuvent passer des données et du JSX en tant que props aux composants clients.

Les Server Components ne sont pas envoyés au navigateur, ils ne peuvent donc pas utiliser des API interactives comme useState. Pour ajouter de l'interactivité, vous pouvez les composer avec des composants clients utilisant la directive "use client".

Les Server Components introduisent une nouvelle manière d'écrire des composants en utilisant async/await. Lorsque vous attendez dans un composant asynchrone, React suspend et attend que la promesse soit résolue avant de reprendre le rendu. C'est extrêmement puissant !

Server Actions

Les Server Actions permettent aux composants clients de déclencher des fonctions asynchrones exécutées sur le serveur.

Lorsque ces actions sont définies avec la directive "use server", votre framework (par exemple Next.js) crée automatiquement une référence à la fonction serveur et la transmet au composant client. Ainsi, lorsque cette fonction est appelée côté client, React envoie une requête au serveur pour exécuter la fonction et retourne le résultat.

Dans cet exemple, le composant client UpdateName utilise useTransition pour gérer l'état de chargement pendant la soumission du formulaire. startTransition exécute l'action serveur updateName, et l'état isPending est mis à jour pour indiquer que la soumission est en cours.

Améliorations diverses

React 19 apporte une série d'améliorations significatives qui simplifient le développement, améliorent les performances et enrichissent l'expérience des développeurs. Voici un résumé exhaustif des principales nouveautés :

ref en tant que prop

Désormais, dans React 19, vous pouvez accéder à ref comme une prop pour les composants fonctionnels :

Les nouveaux composants n'auront plus besoin de forwardRef, qui sera déprécié dans les futures versions.

Amélioration des messages d'erreur de l'hydratation

Les erreurs d'hydratation sont maintenant rapportées avec un seul message contenant un diff des différences.

<Context> comme Provider

Vous pouvez maintenant utiliser <Context> directement comme Provider au lieu de <Context.Provider> :

Fonctions de nettoyage pour les refs

Les fonctions de ref peuvent maintenant retourner une fonction de nettoyage qui sera appelée lors du démontage du composant :

Valeur initiale pour useDeferredValue

L'option initialValue a été ajoutée à useDeferredValue :

Support des métadonnées de document

React 19 supporte nativement les balises de métadonnées dans les composants :

Support des feuilles de style

Vous pouvez maintenant gérer les feuilles de style avec une meilleure intégration dans le rendu concurrent et le rendu en streaming :

Support des scripts asynchrones

Les scripts asynchrones peuvent être rendus n'importe où dans votre arbre de composants :

Préchargement des ressources

React 19 inclut des API pour le chargement et le préchargement des ressources du navigateur :

Autres améliorations

Amélioration de la compatibilité avec les scripts tiers et les extensions : lors de l'hydratation, les balises inattendues dans <head> et <body> seront ignorées pour éviter les erreurs de mismatch.

Meilleure gestion des erreurs : React 19 améliore la gestion des erreurs pour éviter les duplications et fournir des informations détaillées sur les erreurs capturées et non capturées.

Support des éléments personnalisés : React 19 ajoute un support complet pour les éléments personnalisés, permettant de passer des propriétés comme attributs ou propriétés d'éléments personnalisés.

Conclusion

React 19 est une mise à jour importante qui apporte une multitude de nouvelles fonctionnalités et d'améliorations, rendant le développement avec cette bibliothèque encore plus performant et intuitif. Que ce soit avec le nouveau compilateur React, les composants serveur, les actions simplifiées, ou les nouveaux hooks puissants comme use(), useFormStatus(), useActionState() et useOptimistic(), React 19 promet de transformer votre façon de développer des applications web.

Pour ne rien manquer de ces nouveautés et les maîtriser parfaitement, suivez notre formation complète sur Dyma. Nous mettrons à jour notre contenu dès que React 19 sera disponible pour vous offrir les connaissances les plus actuelles et pertinentes. Rejoignez-nous et prenez une longueur d'avance dans le développement web avec React 19 !