Editions ENI Livres | Vidéos | e-Formations
Optimiser ses applications
La mémoïsation
La mémoïsation est une technique de programmation n’ayant rien de spécifique à React, qui consiste à conserver le résultat d’une opération, souvent assez coûteuse en temps de calcul, en mémoire. L’objectif est simple : éviter que l’ordinateur se retrouve à recalculer cette opération plusieurs fois et prévenir ainsi les problèmes de ralentissements liés à une surcharge de calculs.
Le sujet de la mémoïsation est d’autant plus d’actualité avec la récente mise à jour officielle de React version 19 (décembre 2024). Cette mise à jour est supposée, à terme, simplifier nettement les développements en React puisqu’elle rendrait en partie superflues les méthodes de mémoïsation utilisées par les développeurs jusqu’alors. L’apparition, dans cette mise à jour, du React Compiler (compilateur React) automatise le processus de mémoïsation. Attention, car la mise à jour de React 19 et le React Compiler sont deux choses distinctes. Avec le React Compiler, ce ne sera plus au développeur de choisir manuellement ce qui doit être mémoïsé ou non, c’est le React Compiler qui décidera pour lui. Il est aussi ironiquement appelé React Forget du fait qu’il permet « d’oublier » les anciennes méthodes de mémoïsation.
Si les techniques de mémoïsation sont, théoriquement, vouées à disparaître, pourquoi dédier, malgré tout, une section à la mémoïsation ? Il existe au moins trois raisons : d’une part, une raison purement « historique », qui permet de comprendre que React est, comme toute technologie, en constante évolution, et que ces évolutions incluent des méthodes de mémoïsation qui sont vouées à devenir moins centrales. La seconde raison pour laquelle un chapitre sur la mémoïsation est important, c’est que toutes les applications sont loin d’avoir migré sur cette version de React ou sur une version plus récente. De très nombreuses applications fonctionnent encore...
La concurrence
La concurrence est un ensemble de fonctionnalités introduites à partir de React 18 (mars 2022) qui permettent de gérer des rendus de manière non bloquante pour améliorer l’expérience utilisateur et le SEO (Search Engine Optimisation). Son but principal est de rendre les applications plus réactives et fluides en permettant à React de mettre en pause certaines tâches pour se concentrer sur d’autres, comme le chargement initial de la page, la saisie utilisateur, une animation, etc.
Le terme de concurrence est employé, car il indique la capacité de React à travailler sur plusieurs tâches selon un ordre de priorisation que le développeur doit définir (cela ne doit toutefois pas être confondu avec du multithreading). Avant React 18, le processus de rendu était unique et ininterrompu. Une fois un rendu lancé, il bloquait le processus principal du navigateur, entraînant des « gels » de l’interface utilisateur et des performances médiocres en matière de SEO.
1. Le lazy loading
Le lazy loading (chargement paresseux) est une méthode de programmation qui consiste à différer le chargement d’un composant ou d’une autre ressource (image, fichier de code, composant, etc.) jusqu’au moment où il est réellement nécessaire. Par ce biais, le chargement initial de l’application est moins lourd puisqu’il y a moins de données à charger sur la page. En ne chargeant que le strict nécessaire et au moment où il est réellement utile, on rend l’application plus rapide et plus réactive.
Le principe du lazy loading est simple : au lieu de charger toutes les ressources d’une page (via les directives import), on utilise un marqueur qui est remplacé en temps voulu par la ressource dont on a retardé le chargement. Ce moment opportun peut arriver à plusieurs occasions : lorsque l’utilisateur interagit avec un élément de la page, lorsque l’élément à charger apparaît dans le viewport (fenêtre de visibilité) de l’application, ou encore lorsqu’on indique explicitement dans le code avoir besoin de la ressource.
L’implémentation du lazy loading divise le bundle...