Comment migrer vers React 18 ?

React 18  fait évoluer le framework de composants JavaScript populaire avec de nouvelles fonctionnalités basées sur le rendu et la pause simultanés. Il promet de meilleures performances, plus de fonctionnalités et une expérience de développement améliorée pour les applications qui effectuent la transition.

Dans cet article, nous vous montrerons comment mettre à jour les bases de code existantes vers React 18. Gardez à l’esprit que ce guide n’est qu’un aperçu des modifications les plus largement applicables. La migration devrait être assez simple pour les petits projets qui suivent déjà les meilleures pratiques de React ; de grands ensembles de composants complexes peuvent causer certains problèmes, que nous détaillerons ci-dessous.

Installation de React 18

Avant de faire quoi que ce soit d’autre, utilisez npm pour mettre à jour la dépendance React de votre projet vers la version 18 :

$ npm install react@latest react-dom@latest

La nouvelle version n’est techniquement pas rétrocompatible. Les nouvelles fonctionnalités sont activées par abonnement. Puisque vous n’avez pas encore modifié le code, vous devriez pouvoir exécuter votre application et voir qu’elle s’affiche correctement. Votre projet fonctionnera avec le comportement React 17 existant.

$ npm start

Activation des fonctionnalités de React 18 : nouvelle API racine

L’utilisation de React 18 sans aucune modification de la base de code entraînera un effet secondaire : vous verrez un avertissement de la console du navigateur chaque fois que votre application est montée en mode développement.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Ce message d’obsolescence peut être ignoré en toute sécurité, sauf si vous êtes prêt à mettre à niveau votre projet. Si vous souhaitez utiliser les fonctionnalités de React 18, vous devez effectuer la modification qui y est décrite. L’ancienne ReactDOM.render()fonction a été remplacée par une nouvelle API racine plus orientée objet. En plus d’une facilité d’utilisation améliorée, il active également le système de rendu parallèle, qui prend en charge toutes les nouvelles fonctionnalités du titre.

Dans votre fichier index.jsou app.jsrecherchez des lignes similaires à celles-ci :

Il s’agit d’un point d’entrée typique pour une application React. Il rend une instance du Appcomposant importé en tant qu’élément racine de votre application. Le contenu rendu est stocké sous la forme d’ innerHTMLun élément HTML avec une extension id="react".

Pour passer à l’API racine de React 18, remplacez le code ci-dessus par ce qui suit :

L’effet est similaire à l’ancienne ReactDOM.render()API. Au lieu d’initialiser l’élément racine et de rendre votre application en une seule opération impérative, React 18 vous oblige à créer d’abord l’objet racine, puis à rendre votre contenu explicitement.

Trouvez ensuite les endroits dans le code où vous allez démonter le nœud racine. Accédez ReactDOM.unmountComponentAtNode()à une nouvelle unmount()méthode sur votre objet racine :

Remplacement des rappels de rendu

ReactDOM.render()L’argument de rappel de méthode facultatif n’a pas d’équivalent direct dans l’API racine de React 18. Auparavant, vous pouviez utiliser ce code pour vous connecter Rendered!à la console après que React ait fini de rendre le nœud racine :

Cette fonctionnalité a été supprimée car la synchronisation des rappels est imprévisible lors de l’utilisation des nouvelles fonctionnalités d’hydratation partielle et de rendu par thread du serveur React 18. Si vous utilisez déjà des rappels de rendu et que vous devez maintenir la compatibilité, vous pouvez obtenir un comportement similaire en utilisant le mécanisme de lien :

React appelle les références de fonction lors du montage des composants. Définir une référence au composant qui est votre nœud racine vous permet de déterminer quand le rendu se produit, fournissant un effet similaire à l’ancien système de rappel de rendu.

Débogage des problèmes de mise à jour

Votre application devrait maintenant être rendue à l’aide des fonctionnalités de React 18 et sans aucun avertissement de la console. Testez soigneusement votre application pour vous assurer que tout fonctionne comme prévu. Si vous rencontrez des problèmes, vous pouvez les résoudre avec ces solutions générales.

Vérifier <mode strict>

Les applications enveloppées de composants <StrictMode>peuvent se comporter différemment lorsqu’elles sont rendues en mode de conception React 18. En effet, le mode strict vérifie désormais si votre base de code prend en charge l’état réutilisable , un concept qui sera entièrement introduit dans React dans une future version.

L’état réutilisable permet à React de recâbler un composant précédemment supprimé, restaurant automatiquement son dernier état. Cela nécessite que vos composants résistent aux effets de double appel. Le mode strict vous aide désormais à vous préparer à la réutilisation en simulant le montage, le démontage et le remontage de vos composants à chaque fois qu’ils sont utilisés, en identifiant les problèmes où l’état précédent ne peut pas être restauré. Vous pouvez désactiver le mode strict s’il détecte des problèmes dans votre application ou ses dépendances que vous n’êtes pas prêt à résoudre.

Prise en charge de la mise à jour de l’état du lot

React 18 modifie la façon dont les mises à jour d’état sont « packagées » pour améliorer les performances. Lorsque vous modifiez plusieurs fois les valeurs d’état dans une fonction, React essaie de les fusionner en un seul rendu :

Ce mécanisme améliore l’efficacité, mais ne fonctionnait auparavant qu’à l’intérieur des gestionnaires d’événements React. Dans React 18, cela fonctionne sur toutes les mises à jour d’état, même si elles proviennent de gestionnaires d’événements natifs, de délais d’attente ou de promesses. Certains codes peuvent se comporter différemment qu’auparavant si vous effectuez des mises à jour d’état séquentielles à l’un de ces endroits.

Vous pouvez désactiver ce comportement dans les situations où vous n’êtes pas prêt à refactoriser votre code. Enveloppez les mises flushSync()à jour d’état pour les forcer à s’engager immédiatement :

Arrêtez d’utiliser les fonctionnalités supprimées et non prises en charge

Une fois tous les aspects ci-dessus pris en compte, votre application devrait être entièrement compatible avec React 18. Bien qu’il y ait encore quelques changements à la surface de l’API , ils ne devraient pas affecter la plupart des applications. Voici quelques-uns d’entre eux à connaître :

• unstable_changedBitsa été supprimée – cette API non prise en charge permettait de désactiver les mises à jour contextuelles. Il n’est plus disponible.
• Object.assign()Le polyfill a été supprimé – vous devez ajouter manuellement object-assignle package polyfill si vous devez prendre en charge de très anciens navigateurs sans fichier Object.assign().
• Internet Explorer n’est plus pris en charge – React a officiellement abandonné la compatibilité avec Internet Explorer jusqu’à la fin de la prise en charge du navigateur en juin. Vous ne devez pas mettre à niveau vers React 18 si vous avez toujours besoin que votre application fonctionne dans IE.
• L’utilisation de la suspension avec undefinedrepli équivaut désormais aux nulllimites de suspension précédemment omises fallback={undefined}, permettant au code de cascader jusqu’à la limite parent suivante dans l’arborescence. React 18 respecte désormais les composants Suspense sans repli.

Rendu côté serveur

Les applications utilisant le rendu côté serveur nécessiteront quelques modifications supplémentaires pour fonctionner avec React 18.

Selon la nouvelle API racine, vous devez remplacer l’ancienne hydrate()fonction dans le code côté client par la nouvelle hydrateRoot()fournie par le react-dom/clientpackage :

Dans votre code côté serveur, remplacez les appels d’ API de rendu hérités par leurs homologues plus récents. Dans la plupart des cas, vous devez passer renderToNodeStream()à un nouveau renderToReadableStream(). Les nouvelles API de streaming exposent les capacités de rendu du serveur de streaming de React 18, où le serveur peut continuer à fournir du nouveau HTML au navigateur après le rendu initial de votre application.

Commencez à utiliser les fonctionnalités de React 18

Maintenant que vous avez effectué la mise à niveau, vous pouvez commencer à rendre votre application plus puissante en incorporant les fonctionnalités de React 18. L’utilisation de la simultanéité par React signifie que le rendu des composants peut être interrompu, ouvrant de nouvelles possibilités et des interfaces utilisateur plus réactives.

Certaines des fonctionnalités ajoutées incluent des mises à jour majeures de Suspense, un moyen de hiérarchiser les mises à jour d’état à l’aide de Transitions et un mécanisme intégré de limitation des rendus provoqués par des mises à jour non urgentes mais fréquentes. Il existe également quelques modifications et améliorations diverses : vous pouvez revenir undefinedà partir d’ render()une méthode de composant, l’avertissement concernant l’appel de setState()composants non câblés a été supprimé et quelques nouveaux attributs HTML tels que imageSizes, imageSrcSetet sont aria-descriptionreconnus par le moteur de rendu React DOM.

Sommaire

React 18 est stable et prêt à l’emploi. Dans la plupart des cas, le processus de mise à niveau doit être rapide et facile, ne nécessitant qu’une mise à niveau npm et un passage à la nouvelle API racine. Cependant, vous devez toujours tester tous vos composants : ils peuvent se comporter différemment dans certaines situations, comme en mode strict ou lorsque l’auto-empaquetage est appliqué.

Cette nouvelle version indique l’orientation future de React en tant que framework hautes performances pour toutes sortes d’applications Web. Il étend également les capacités de rendu côté serveur de React en ajoutant une pause côté serveur et la possibilité de continuer à diffuser du contenu à vos utilisateurs après le rendu initial. Cela donne aux développeurs plus de flexibilité pour distribuer le rendu à la fois sur le client et sur le serveur.