React 19 - Les grandes nouveautés de la bibliothèque JavaScript
Publié le 4 octobre 2024
Par Pierre Gouedar
Introduction
React 19 a été annoncé par l'équipe de Meta avec de nombreuses nouveautés et améliorations pour faciliter la vie des développeurs et améliorer les performances. Des framework comme Next.Js (dans sa dernière version) supportent déjà cette nouvelle version de React et tirent pleinement parti des récents changements apportés.
Qu'est-ce que React ?
React est une bibliothèque JavaScript développée par Meta (anciennement Facebook) ayant pour but de faciliter la création d'interfaces utilisateur. Elle permet de construire des applications web dynamiques et réactives en utilisant des composants réutilisables. En plus de son architecture, React optimise le rendu des composants via un DOM virtuel, offrant de meilleures performances et une expérience plus fluide pour les utilisateurs.
Évolution de React vers la version 19
Avec chaque nouvelle version, React s'adapte aux besoins des développeurs et aux exigences des applications web. Face à des interfaces toujours plus complexes et des attentes croissantes en termes de performances, Meta cherche à simplifier le travail des équipes de développement tout en augmentant l'efficacité du rendu. La version 19 de React reflète cet objectif en proposant des outils plus performants et en automatisant certaines optimisations. Les nouveautés introduites permettent également une meilleure gestion des actions asynchrones et des interactions avec le serveur, facilitant ainsi la création d'applications modernes et fluides.
Le nouveau compilateur de React
La grande nouveauté de React 19, c'est son compilateur expérimental : React Compiler. Il permet l'optimisation automatique des applications faites à l'aide de React. Fini l'utilisation des hooks useMemo, useCallback et de React.memo, React Compiler s'en occupe automatiquement et optimise même les mises à jour de l'interface utilisateur.
Le nouveau hook use
Le nouveau hook use permet de lire des ressources dans le rendu. Par exemple, il permet de lire la valeur d'un Context ou d'une Promise sans lancer d'erreur. Il simplifie la gestion des états de chargement en plus de pouvoir structurer le code de manière plus naturelle. Le hook use peut aussi être appelé conditionnellement, ce qui offre une certaine flexibilité au niveau de son utilisation.
const value = use(ressources);Le nouveau hook useOptimistic
Le hook useOptimistic simplifie la gestion des mises à jour optimistes de l'interface utilisateur lorsque des mutations de données asynchrones interviennent. Ce hook permet de mettre à jour l'interface avant que les données ne soient changées sur le serveur, afin de réduire l'attente et d'augmenter la fluidité des requêtes. Si la requête aboutit ou échoue, React ajuste automatiquement l'état pour revenir à la valeur initiale si nécessaire.
useOptimistic prend deux arguments : un état initial et une fonction qui gère la mise à jour de la valeur de l'état initial. Voici un exemple :
const [optimisticMessages, newOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) = [
...state,
{
id: `newMessage-${messages.length}`,
content: newMessage,
pending: true
},
],
);
Le nouveau hook useFormStatus
Ce nouveau hook permet de lire les informations sur l'état actuel d'un formulaire parent dans un composant enfant, sans devoir passer des props en cascade aux enfants. Ce hook trouve son utilité dans des situations où les composants enfants ont besoin de connaître l'état du formulaire dans lequel ils se trouvent.
useFormStatus retourne un objet contenant les propriétés suivantes :
pending: un booléen indiquant si le formulaire est en cours de soumission.data: un objetFormDatacontenant 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 propactiondu formulaire parent.
Le nouveau hook useActionState
Ce hook permet la modification du state en fonction du résultat de l'action. Par exemple, si l'action se passe bien, les données du state seront mise à jour, dans le cas contraire, on peut afficher un message pour signifier qu'il y a eu une erreur.
const [state, formAction, isPending] = useActionState(action, 0);Nous avons ici :
state- Représente le state initial au premier rendu et le state mis à jour par la fonction action passée en paramètre.formAction- Une nouvelle action que l'on peut utiliser dans l'attribut formAction d'un bouton.isPending- Pour détecter quand une action est en train d'être réalisée ou non.action- La méthode que nous voulons utiliser quand le formulaire est envoyé.0- Notre state initial.
Les servers actions
L'une des grandes nouveautés de React 19 sont les Server Actions. Elles permettent aux composants clients de déclencher des fonctions asynchrones exécutées sur le serveur. Lorsque ces actions sont marquées avec la directive "use server", le framework utilisé (comme Next.js) établit automatiquement une référence à la fonction serveur et l'envoie au composant côté client. Ainsi, lorsqu'elle est appelée depuis le client, React envoie une requête au serveur pour exécuter la fonction puis retourne le résultat obtenu.
L'ajout du support des balises de métadonnées
Cette nouvelle version de React propose l'accès à plusieurs balises meta :
- title
- meta tags
- description
Voici un exemple :
const MainPage = () => {
return (
<>
<title>Koul</title>
<meta name="description" content="Artisans du web à Reims et Paris | Fabrique digitale - KOUL" />
</>
);
}Mise à jour de la gestion des refs
React 19 ajoute une mise à jour vis à vis de la gestion des refs. Elles peuvent désormais être transmises comme props aux composants au lieu de devoir passer par le hook forwardRef :
const button = ({ ref, children }) => (
<button ref={ref}>
{children}
</button>
));Il est aussi possible maintenant de retourner une fonction de nettoyage des refs qui sera appelée lors du démontage de ce composant :
<input
ref={(ref) => {
// Initialisation de la ref
return () => {
// Nettoyage de la ref
};
}}
/>Autres améliorations
React 19 apporte beaucoup d'améliorations majeures, mais également quelques améliorations plus discrètes, mais qui améliorent tout autant l'expérience de développement et les performances des applications web :
L'amélioration des erreurs d'hydratation permet au développeur de mieux situer les problèmes de sémantique lorsque des erreurs d'hydratation surviennent lors du rendu côté serveur avec Next.Js version 15.
Exemple d'une nouvelle erreurs d'hydratation
Il est désormais possible d'utiliser uniquement <Context> au lieu de <Context.Provider> en tant que provider.
L'option initialValue a été ajoutée à useDeferredValue.
Il est désormais possible de gérer les feuilles de style avec une meilleure intégration dans le rendu.
Les scripts asynchrones peuvent être rendus n'importe où dans votre arbre de composants.
React 19 inclut des API pour le chargement et le pré chargement des ressources du navigateur :
preinitpreloadprefetchDNSpreconnect
Conclusion
React 19 apporte des améliorations notables qui facilitent le développement d'applications web tout en optimisant leurs performances.
Les nouveautés comme le compilateur expérimental, les nouveaux hooks (use, useOptimistic, useFormStatus), et les Server Actions simplifient le travail des développeurs en automatisant et en optimisant certaines tâches répétitives et complexes.
Les petites améliorations, telles que la gestion des refs et des erreurs d'hydration, contribuent également à rendre l'expérience de développement plus fluide.
Cette version de React lui permet de renforcer sa position d'outil incontournable pour créer des interfaces réactives et performantes.
Ressources et Documentation
Documentation officielle de React : https://react.dev/
Si vous avez une application web ou un projet web sur mesure, nous développons les logiciels qui répondent à vos besoins ! Contactez nous
Pierre Gouedar
Partager l'article