Performance React de niveau supérieur

Nous allons apprendre quelques techniques et API pour améliorer l'expérience utilisateur et supprimer les problèmes de performances afin de faire passer nos applications React au niveau supérieur.

Dans cet article, nous allons en savoir plus sur la façon de réaliser un d'excellentes performances dans nos applications React en utilisant certaines techniques et astuces pour obtenir une meilleure application, améliorer notre UX et les performances en général, et rendre nos utilisateurs plus heureux. Obtenir de meilleures performances dans notre application se traduira par plus de prospects, des taux de conversion plus élevés, une meilleure UX, etc.

Tant d'années de développement Web, les choses s'améliorent chaque année, de nouveaux langages sont lancés, des frameworks, des bibliothèques, projets sources, etc., et l'un des sujets les plus rebelles de React encore est la performance. Comment obtenir de bonnes performances dans mon application React? À quelles mesures dois-je faire attention? Comment la convivialité est-elle affectée par mes problèmes et comment puis-je les résoudre?

Les performances sont un sujet important dans le développement Web de nos jours, mais il n'y a pas assez de gens qui en parlent. Examinons donc en profondeur comment nous pouvons améliorer nos performances sur l'ensemble de notre application.

Les performances comptent

L'un des points les plus pénibles pour les développeurs est la performance de leurs applications et la façon dont ils voient leurs performances et comment ils peuvent l'améliorer. La plupart du temps, nous ne savons pas exactement comment améliorer nos applications et notre code, ni à quelles métriques nous devons prêter attention pour comprendre le problème auquel nous sommes confrontés et les meilleures solutions. Parfois, cela peut nous conduire à des problèmes plus graves tels que:

1. Nous commençons à faire des performances de nos applications une deuxième priorité, en pensant que nous y remédierons plus tard. Mais parfois, nous ne le résolvons pas du tout, ou n'agissons pas comme si nous l'avions résolu – mal – mais nous insistons pour que nous le résolvions.
2. Nous essayons de résoudre et de créer d'autres problèmes que nous ne voyons pas au début qui vont ont un impact énorme sur l'avenir, et qui peut aggraver l'erreur de performance précédente que nous essayons de corriger.
3. Nous pouvons créer un faux sentiment de sécurité que notre application fonctionne bien et que les performances sont impressionnantes en lisant nos métriques sont erronées et ne comprennent pas exactement ce qu'est et où se trouve une erreur et comment la corriger.

En ayant ces trois points, les effets sur votre application seront terribles. Une application assez lente, une UX pire, votre utilisateur quittera votre page dès qu'elle sera rendue pour lui – votre page mettra tellement de temps à s'afficher qu'il partira tout de suite, etc. C'est l'un des problèmes que vous pouvez imaginer cela peut se produire – ou cela se produit actuellement – dans votre application si vous n'avez pas une véritable culture des performances. Par culture de performance, je veux dire regarder attentivement chaque élément de votre application, et le code que vous y mettez, pour comprendre profondément comment cela affectera votre application maintenant et à l'avenir.

Donc, maintenant que nous connaissons l'un des différents effets que de mauvaises performances peuvent avoir dans notre application, nous verrons plus comment nous pouvons l'améliorer en utilisant certains concepts et techniques dont nous disposons maintenant.

Concepts

Tous les points sur lesquels je vais écrire ici sont liés à React. En les faisant correctement, vous atteindrez un tout nouveau niveau de performances dans votre application.

Profilage

L'une des extensions les plus utiles dont vous avez besoin dans votre navigateur est React DevTools. Cette extension vous permet d'inspecter vos composants React directement dans votre navigateur et de vérifier ce qui est passé comme accessoire, quelles fonctions ont été appelées, quand votre application est rendue exactement, etc.

Depuis la version React 16.5, nous avons eu prise en charge du plug-in DevTools Profiler, ce qui signifie que nous pouvons désormais avoir des informations plus détaillées sur le rendu de nos composants pour identifier et résoudre les goulots d'étranglement des performances.

Tout d'abord, vous devez exécuter votre application React, puis accéder à React DevTools. Dans React DevTools, vous aurez deux options: Elements, qui vous montrera votre arborescence d'éléments React, et Profiler, le plugin que nous allons utiliser. Allez dans Profiler, et maintenant tout ce que vous avez à faire est de cliquer sur le bouton pour commencer à enregistrer votre application.

Maintenant, à chaque fois que votre application sera rendue, vous obtiendrez quelque chose de similaire à ceci:

Avec le plugin Profiler, vous pouvez voir combien de fois un composant particulier a été rendu pendant le profilage, quels composants ont pris le plus de temps à être rendus, pourquoi un composant est réellement rendu, etc. En faisant cela, vous obtiendrez des informations à chaque fois le rendu de votre application et un résumé assez détaillé de ce qui se passe au fond de votre application React, de la façon dont il rend vos composants, et vous pouvez découvrir des composants lents et d'autres problèmes.

React.PureComponent

Un moyen simple et puissant qui vous pouvez garantir que votre composant ne sera pas rendu inutilement en utilisant PureComponent. En utilisant PureComponent dans votre application, vous augmenterez les performances et réduirez le nombre d'opérations de rendu dans l'application.

Voici comment fonctionne le React.PureComponent : il change la méthode du cycle de vie shouldComponentUpdate lui donnant le pouvoir de vérifier automatiquement si un nouveau rendu est nécessaire. Donc avec cela, React.PureComponent appellera la méthode render uniquement s'il détecte des changements dans état ou props .

React.memo

Along la manière dont dans l'histoire de React, il a eu quelques versions importantes qui ont introduit beaucoup de nouvelles fonctionnalités impressionnantes que nous avons volontiers commencé à inclure dans nos applications. L'une des versions les plus importantes de React de tous les temps était la 16.6, sortie en octobre 2018. Elle nous a présenté de nombreuses nouvelles fonctionnalités impressionnantes telles que le chargement différé, contextType et mémo.

React.memo est un moyen de garantir que votre composant ne sera pas à nouveau rendu lorsque les accessoires ne changent pas.

C'est similaire à React.PureComponent mais c'est pour les composants de fonction. Avec lui, vous pouvez désormais avoir un composant purement fonctionnel dans votre application, supprimant les mises à jour inutiles qui pourraient se produire quotidiennement dans votre code.

Mémoize

Pour avoir une grande performance dans votre application, une technique importante qui vous devez mettre en œuvre la mémorisation. Mais qu'est-ce que la mémorisation exactement?

La mémorisation est une technique que nous implémentons dans nos composants et fonctions en stockant les résultats d'une fonction ou d'un composant, et elle renvoie un résultat mis en cache. Cela signifie que, avec la même entrée, nous aurons la même sortie. Il s’agit essentiellement de fonctions pures, et dans notre cas de composants React purs.

Une façon de mémoriser nos applications consiste à utiliser l’API React.memo dont nous avons parlé précédemment. Aussi, nous pouvons utiliser le React.PureComponent pour avoir le même comportement dans les composants de classe. La mémorisation peut sembler excellente, mais elle a un coût. Il échange de l'espace mémoire contre de la vitesse – il passera inaperçu dans les fonctions à faible mémoire, mais vous le verrez très bien dans les fonctions à haute mémoire.

Virtualisation

Chaque application a aujourd'hui une liste de données à afficher sur le utilisateurs. Certaines applications ont une énorme liste de données, certaines ont moins de données à afficher, mais le fait est que les listes sont l'un des meilleurs moyens d'afficher des données. Mais nous ne savons pas toujours la taille d'une liste de données que nous aurons au début, et avant que nous le sachions, la liste prend une taille considérable et commence à ralentir l'ensemble de notre application.

nous pouvons rendre de grandes listes de données dans nos applications React en utilisant la technique de la virtualisation. Fondamentalement, la virtualisation est une technique qui, lorsque nous avons une grande liste de données, ne rendra que les éléments visibles à l’écran. Cette technique est très puissante et a beaucoup de sens – il n'est pas nécessaire de rendre tous les éléments d'une liste spécifique s'ils ne sont pas encore visibles pour l'utilisateur.

L'une des meilleures bibliothèques à utiliser est React Virtualisé . En utilisant cette bibliothèque, vous aurez une liste virtualisée de données, augmentant les performances de votre application, supprimant la complexité sans compromettre les performances du côté de l'utilisateur.

Division du code et chargement paresseux

Comme nous l'avons appris auparavant, un des versions les plus importantes de React était 16.6 car elle nous a présenté de nombreuses nouvelles API qui peuvent nous aider à améliorer les performances de nos applications.

Le partage de code signifie essentiellement que nous allons simplement "charger paresseusement" les choses dont l'utilisateur aura besoin. Ce faisant, nous pouvons augmenter les performances de notre application en supprimant la nécessité de charger une tonne de code inutile. Et qu'en est-il du chargement paresseux?

Le chargement paresseux est essentiellement la façon dont nous pouvons rendre les composants paresseusement grâce au partage de code – ne restituant que les éléments les plus importants au début, puis les moins importants plus tard. 'pas de support pour le chargement paresseux, nous avons donc dû utiliser des bibliothèques externes, telles que react-loadable – qui est une très belle bibliothèque pour le chargement paresseux, mais, depuis React 16.6, nous avons React.Suspense et React.lazy API pour nous aider à commencer à charger paresseusement nos applications.

Tout ce que nous avons à faire pour rendre une importation dynamique en tant que composant régulier est de passer React .lazy une fonction. Ensuite, il chargera le bundle contenant les composants spécifiques lorsque ce composant sera rendu.

Voici comment ce composant fonctionne: Si le composant List n'est pas rendu lorsque le MainList est rendu, il affichera un repli pendant que nous attendons le chargement – dans ce cas, le composant qui se trouve à l'intérieur du composant Suspense . Avec Suspense, il n'est plus nécessaire de créer des composants de chargement sophistiqués avec une tonne de connexions d'état à l'intérieur. Tout ce que nous avons à faire est d'importer Suspense puis de transmettre un composant de chargement que nous voulons, et de laisser React gérer les choses pour nous par magie.

Fragments

Une technique simple qui peut beaucoup améliorer votre la demande est Fragments . Parfois, dans nos applications, nous ne voulons pas créer d'élément wrapper, mais nous pouvons nous sentir obligés de le faire, car il n'y a pas de moyen facile de le faire plus tard. Les fragments ne sont pas une nouvelle API – ils ont été publiés dans la version 16.2 – mais c'est un moyen très utile de créer un nouveau wrapper sans créer un nouvel élément DOM.

Les avantages que nous tirons de Fragments sont nombreux. Ils sont beaucoup plus rapides et utilisent moins de mémoire car nous ne créons pas un nouvel élément DOM juste pour envelopper d'autres éléments. Ils augmentent les performances dans certains cas où nous avons de très grandes arborescences d'éléments, l'inspecteur DOM est moins encombré, etc.

Vous n'avez pas besoin de commencer à utiliser Fragments partout dans votre application, mais parfois ils 'sera très utile pour vous et peut améliorer les performances de votre application.

Conclusion

Dans cet article, nous avons appris comment nous pouvons atteindre un tout nouveau niveau de performance dans nos applications en utilisant certaines des techniques et concepts que React propose. Nous avons appris comment nous pouvons utiliser le profilage pour résoudre certains problèmes de performances auxquels nous pourrions être confrontés, comment nous pouvons utiliser la virtualisation pour un meilleur rendu de grandes listes de données de manière efficace, etc. En appliquant ces concepts et techniques dans votre application, vous aurez un une meilleure UX, vous augmenterez vos taux de conversion et améliorerez vos prospects, et cela deviendra également une pratique dont vous ne voudrez plus vous passer, faisant de vous un développeur encore meilleur.