React 19 : Tout ce qu’il faut savoir sur les dernières mises à jour
Depuis son lancement, React a transformé le développement des interfaces utilisateur interactives, provoquant un changement radical dans la manière dont les développeurs créent des applications dynamiques.
Avec ses différentes versions, React continue de se démarquer grâce à ses performances, ses outils puissants, et ses fonctionnalités avancées, maintenant ainsi sa position de leader dans le développement web. La sortie de React 19 repousse une fois de plus les limites, simplifiant le processus de création d’applications complexes.
React 19 est là, avec des nouveautés qui facilitent et accélèrent la création de sites web. Découvrons ensemble les principales mises à jour et voyons comment elles peuvent booster vos projets.
Dans cet article, nous allons explorer les nouvelles fonctionnalités de React 19 qui améliorent les performances et la robustesse des applications.
Notez que React 19 est encore en phase de développement.
1. React Compiler
Jusqu’à présent, React ne gérait pas automatiquement le re-render lors des changements d’état. Dans les précédentes versions, il fallait utiliser les hooks “useMemo()” et “useCallback()” pour optimiser les re-renders.
Avec React 19, il n’est plus nécessaire de gérer manuellement ces hooks. Le « React Compiler » gère désormais automatiquement la mise à jour de l’état et de l’interface utilisateur, simplifiant ainsi cette tâche complexe.
Exemple :
Avant React 19 :
Après React 19 :
2. Server Component
Les composants serveurs sont utilisés depuis des années, en particulier avec Next.js qui les a popularisés en production.
Dès Next.js 13, tous les composants sont par défaut des composants serveurs. Pour exécuter un composant côté client, la directive “use client” est nécessaire.
Avec React 19, les composants serveurs sont intégrés directement. Cela permet d’améliorer le SEO grâce à un rendu initial plus rapide et performant, tout en exécutant le code côté serveur.
Par défaut, tous les composants de React sont des composants clients, sauf lorsqu’ils utilisent ‘use server’, transformant ainsi le composant en composant serveur.
Exemple :
Dans cet exemple, React se lancera sur le serveur en utilisant la directive ‘use server’. Il est possible d’importer “requestUsername” dans n’importe quel composant React au sein du même projet.
3. Actions
Cette version de React 19 met l’accent sur l’optimisation des interactions avec les formulaires, introduisant les “ACTIONS” pour simplifier la gestion des états et des validations.
Elles permettent également une intégration plus fluide des hooks. Ces actions remplacent l’événement “onSubmit” et deviennent des attributs du formulaire HTML.
Les actions peuvent fonctionner de manière synchrone ou asynchrone, côté client (avec JavaScript standard) ou côté serveur (avec ‘use server’).
Exemple :
Avant React 19 :
Dans l’extrait de code ci-dessous, nous allons utiliser l’événement onSubmit de React, qui déclenche l’exécution de la méthode “search” lors de la soumission du formulaire.
Après React 19 :
Avec l’explication des composants serveurs, on peut exécuter les actions en mode serveur. Dans notre exemple, nous allons aborder le “onSubmit” et utiliser “action”. La valeur de l’attribut action sera une méthode pour soumettre les données soit côté client, soit côté serveur. Avec “action”, on peut exécuter des opérations synchrones et asynchrones.
4. Document Metadata
L’accessibilité et la visibilité d’un site web dépendent largement de son optimisation SEO (Search Engine Optimization). Les métadonnées jouent un rôle crucial à cet égard. React 19 introduit le Document Metadata, permettant de définir et d’ajouter des balises méta SEO directement au sein des composants React. Les avantages incluent la gestion centralisée des métadonnées et des mises à jour dynamiques en fonction de l’état de l’application et des interactions utilisateur.
Exemple :
Avant React 19 :
Dans cet exemple, on utilise une librairie tierce (Helmet) comme ‘react-helmet’ pour gérer les métadonnées en vue de l’optimisation pour les moteurs de recherche.
Après React 19 :
Avec React 19, on peut utiliser le “title” et “meta” directement dans le composant React.
5. Web Components
Une fonctionnalité attendue depuis longtemps arrive enfin ! React 19 intègre les Web Components, ouvrant ainsi un monde de possibilités en facilitant la collaboration entre différents frameworks.
Cette intégration permet de créer des éléments en utilisant HTML, CSS et JavaScript directement dans l’application, sans nécessiter de librairie tierce.
6. Asset Loading
Cette nouvelle fonctionnalité révolutionne l’expérience utilisateur (UX). Le Asset Loading de React 19 contrôle le chargement des composants et éléments, améliorant significativement les performances des applications en chargeant les fichiers en arrière-plan.
7. React 19 Hooks
Plus besoin des hooks ‘useMemo’ et ‘useCallback’ avec React 19, grâce à l’implémentation du compilateur qui gère l’état et la mise à jour des composants. De plus, le hook “use” est maintenant optimisé pour modifier l’utilisation de “forwardRef”, “useEffect” et “useContext”.
7.1 / forwardRef()
En React 19, “ref” sera passé comme props et non plus comme hook forwardRef().
Avant React 19 :
Après React 19 :
7.2 / use() hook
Le use() hook permet de lire la valeur d’une ressource comme une promesse ou un contexte.
Comme nous pouvons le remarquer, avec React 19 nous n’avons plus besoin d’utiliser “ThemeContext.Provider”. Il suffit d’utiliser directement notre contexte avec son nom “ThemeContext”.
7.3 / useOptimistic() hook
Le hook ‘useOptimistic()’ permet de mettre à jour l’interface utilisateur avant que les modifications ne soient confirmées par le serveur, améliorant la fluidité des interactions.
Pour l’utiliser, il suffit de créer un état avec useOptimistic() en passant en paramètre la valeur initial (ex ci-dessous ‘products’).
On le définit de la manière suivante : [optimisticValue, OptimisticFunction] = useOptimistic(Items, FonctionPourMettreAJour).
Le premier paramètre est la valeur actuelle des items. Le deuxième, c’est la fonction qui met à jour visuellement la valeur des items avant que l’appel à l’API fetch ne soit terminé.
7.4 / useFormStatus() hook
useFormStatus() est un nouveau hook de React 19. Ce hook nous retourne un objet contenant l’état de soumission du formulaire. Le syntaxe du hook “useFromStatus” :
- ‘pending’: Une valeur booléenne qui indique si le formulaire est en cours de soumission (true | false).
- ‘data’:Un objet des données du formulaire transmises.
- exemple: {name: ‘nom’, email: ‘team-x.fr’}
- ‘method’: Chaîne de caractères qui représente la méthode HTTP utilisée “POST, GET, PUT, DELETE”. La valeur de ‘method’ par défaut c’est “POST”.
- ‘action’: Chaîne pour exécuter une fonction.
Exemple :
React 19 en conclusion
React 19 introduit des fonctionnalités innovantes transformant l’expérience de développement web. Avec des performances accrues et une flexibilité remarquable, React 19 reste un choix incontournable pour les développeurs. Actuellement en version bêta, des mises à jour supplémentaires sont à venir !
Les nouvelles tendances du recrutement en ESN
Le secteur des Entreprises de Services du Numérique (ESN) est en constante évolution, marqué par l'émergence de technologies innovantes, la…
Lire l'article
React 19 : Tout ce qu’il faut savoir sur les dernières mises à jour
Depuis son lancement, React a transformé le développement des interfaces utilisateur interactives, provoquant un changement radical dans la manière dont…
Lire l'article