React.js : Memoïsation et autres techniques d’optimisation front

Comment conserver une application React rapide malgré l’ajout croissant de données ? Comment réduire le nombre et le poids des requêtes envoyées par mon front ?

Prérequis
– Bases de TypeScript
– Bases de React (transmission des props et hook useState)
– Bases sur l’interrogation d’une API depuis le front (fetch)

Public
– Reconversion professionnelle
– Développeur(se) junior

Au programme
– Rappels sur le re-render, concept clé du cycle de vie React
On fait des expériences pour voir comment déclencher le re-render (useState, composants enfants, itérations avec “.map()”, propriété “key”), et ce qu’un re-render effectue comme calculs.
– La mémoïsation pour éviter de recalculer plein de fois la même chose
Motivations : applications plus rapides à utiliser. Principe et utilisation des hooks useMemo (composants à plusieurs inputs), useReducer et useCallback.
– Où déclarer ses mémos ?
Réflexion sur le niveau d’arborescence parent-enfant auquel déclarer un hook useMemo (calculs redondant dans les enfants ?) Refactoring live : remontée d’un memo à la racine.
– Autres techniques de cache front : local storage et API modulaire
Stocker des données entre deux changements de page ou rafraîchissement (local storage). Utiliser une API qui permet de modifier et rafraîchir seulement de petits morceaux du state de l’application front.
– Exemple 1 Panier ecommerce : Arborescence parent-enfant simple, cas de rendu itératif de composants et de calculs (complexes/exponentiels) à mémoïser.
– Exemple 2 Recherche, liste de produits et interfaçage avec le panier : travail avec une API, refactoring du memo vers la racine, choix de données à stocker localement.

Ressources pédagogiques
Les ressources pédagogiques proviennent de productions des équipes DTeK et/ou des formateurs partenaires et/ou de la documentation officielle. Les documents sont en français ou en anglais.

Financement
– Financement en fond propre
– Non éligible au financement via CPF

Accessibilité de nos formations
Si besoin d’adaptation sur l’une de nos formations ou d’informations complémentaires, prenez contact avec la référente handicap par email (ychouarbi@dtek.fr) ou par téléphone (0782718878).