Lundi, Dan Abramov et Rachel Nabors, de l’équipe de développement de React, ont annoncé la disponibilité de la release candidate de la version 17.0 de la bibliothèque JavaScript. React v17.0 n’introduit aucune nouvelle fonctionnalité et est décrit par l’équipe comme étant une version tremplin qui rend plus sûre l'intégration d'un arbre géré par une version de React dans un arbre géré par une autre version de React. Malgré ce fait, l’équipe soutient que cette version est particulièrement importante pour l’avenir de React. Voici les points clés qui expliquent ce point de vue.Mise à jour progressive de React
Selon la note de version de React v17.0, les anciennes mises à jour de React ont toujours entraîné des déprédations des anciennes versions. Cela pourrait être incroyablement difficile pour les équipes de mettre à jour leurs versions de React, notamment lorsqu'elles travaillent avec des bases de code importantes ou négligées. L'équipe React a donc décidé que la v17 jettera les bases d'une nouvelle méthode d'adoption des mises à jour. Ainsi, lorsque la version 18 de React sera disponible, les développeurs pourront choisir de ne mettre à jour que certaines parties de leur application et de laisser les autres parties fonctionner sous la version 17.
Néanmoins, l’équipe a mis en garde concernant cette pratique. Elle déconseille de procéder de cette façon si votre application est activement maintenue ou est en production à grande échelle. Par contre, elle estime que cela peut aider les équipes qui ne maintiennent pas activement leur application ou qui n'ont pas besoin de migrer certains composants vers la nouvelle version. Les nouvelles versions de React n'abandonneront pas ces applications et n'exigeront pas de migrations massives. L’équipe dit avoir mis un peu plus de deux ans pour rendre cela possible.
Elle a en effet retravaillé le système d'événements. Ces changements ont permis de faire de React v17.0 une version majeure de la bibliothèque, car elle pourrait potentiellement casser de nombreuses applications.
Les événements ne sont plus attachés au document
Contrairement à ce que vous pourriez penser, React n'associe pas les événements à des éléments individuels. Au lieu de cela, React lie un gestionnaire par type d'événement au nœud du document. Cette approche augmente les performances des applications comportant de grands arbres d'éléments et permet également de bénéficier de fonctionnalités telles que la relecture d'événements. En arrière-plan, React peut capturer un événement et déterminer quel composant il doit appeler avant de propager l'événement dans l'arbre des composants.
Cependant, en JavaScript natif, l'événement se serait déjà propagé au niveau du document. Bien que cela ne semble pas être un problème, ce système se casse lorsqu'il exécute plusieurs instances de React. De cette manière, si une application React imbriquée dans une autre arrête la propagation de l'événement, l'application parente continuera à capturer l'événement. C'était un casse-tête majeur pour les développeurs cherchant à imbriquer différentes versions de React. Ce problème peut intervenir en production, comme avec l'éditeur de code Atom il y a quatre ans.
À partir de React v17.0, la bibliothèque attachera les gestionnaires d'événements au nœud racine de l'application React. Selon l’équipe, cela permettra un emboîtement sûr des arbres React les uns dans les autres. Toutes les instances de React doivent utiliser la version 17 ou une version supérieure pour que cela marche. Ce changement rend aussi facile l’intégration des applications React dans d'autres frameworks comme jQuery. React empêchera désormais les événements de se propager à jQuery comme on pourrait s'y attendre.
Optimiser l'effet de nettoyage
Il est assez courant de renvoyer une fonction de nettoyage dans le cadre d'une méthode useEffect pour arrêter tout code s'exécutant dans la fonction. Avant, ce nettoyage fonctionnait de façon synchrone avant que la trame suivante ne soit dessinée. En réalité, la plupart des applications n'exigent pas que les mises à jour d'écran soient retardées pour exécuter les méthodes de nettoyage. De ce fait, elles fonctionneront désormais de manière asynchrone après que React ait rendu la trame suivante. Cela devrait permettre de passer plus rapidement d'un composant à l'autre. Vous pouvez toujours utiliser la méthode useLayoutEffect pour exécuter une méthode de nettoyage qui bloque la boucle de rendu.
Plus de mise en commun des événements
Le regroupement d'événements est incroyablement déroutant et ne permet aucune optimisation sur les navigateurs modernes. Au contraire, elle peut être la cause d'étranges bogues quand on travaille avec plusieurs composants captant le même événement. Un gestionnaire d'événement peut définir l'événement comme étant nul, et donc les autres composants utilisant l'événement se retrouveront avec une erreur de variable nulle. Pour corriger cela, React v17.0 permettra d'accéder aux champs d'événements à tout moment.
Source : React v17.0
Et vous ?
Que pensez-vous de React 17.0 ?Voir aussi
React : la version 16.8 de la bibliothèque JavaScript est disponible et embarque une version stable des Hooks Facebook accepte de changer la licence de React, la bibliothèque JavaScript va passer sous la licence MIT pour apaiser la communauté open source JavaScript : Twitter a transféré tout son trafic mobile vers un nouveau stack : Node.js, Express et React Facebook annonce la réécriture des composants internes de son Framework React Native pour faciliter son utilisation avec les applications hybrides