Accueil/Notions/React.memo

React.memo

React.memo est une fonctionnalité de React qui permet d'optimiser les Performances des composants fonctionnels (React) en mémorisant le résultat du rendu. Cette technique est particulièrement utile lorsque tu as des composants (components, React) qui reçoivent les mêmes props (React) mais qui ne nécessitent pas de se mettre à jour à chaque rendu du composant parent. Voici comment ça fonctionne et quand l'utiliser.

Fonctionnement de React.memo

React.memo est une Fonctions d'ordre supérieur. Tu l'enroules autour de ton composant, et elle ne permettra le re-renders (React) de ce composant que si les props ont changé. Sous le capot, React fait une comparaison superficielle des props actuelles et des nouvelles props. Si les props n'ont pas changé, React saute le rendu du composant et réutilise le dernier résultat rendu.

Exemple en TypeScript

Imaginons que tu aies un composant qui affiche un utilisateur. Ce composant reçoit un objet user comme prop. Tu peux utiliser React.memo pour éviter des rendus inutiles si l'objet user n'a pas changé.

import React from 'react';

type UserProps = {
  user: {
    id: number;
    name: string;
  };
};

const UserComponent: React.FC<UserProps> = React.memo(({ user }) => {
  console.log('Rendering:', user.name);
  return <div>{user.name}</div>;
});

export default UserComponent;

Dans ce code, UserComponent ne se rerendera que si l'objet user change. Si les props user sont les mêmes entre les rendus, React saute le rendu du composant.

Personnaliser la comparaison

Si tu as besoin d'une logique de comparaison plus spécifique que la comparaison superficielle par défaut, React.memo te permet de passer une fonction de comparaison comme second argument. Cette fonction prend les anciens props et les nouveaux props, et doit retourner true si les props sont équivalents (ce qui empêche le rendu), ou false si les props ont changé et que le composant doit se rerendre.

import React from 'react';

type UserProps = {
  user: {
    id: number;
    name: string;
    age: number;
  };
};

const userPropsAreEqual = (prevProps: UserProps, nextProps: UserProps) => {
  return prevProps.user.id === nextProps.user.id && prevProps.user.name === nextProps.user.name;
};

const UserComponent: React.FC<UserProps> = React.memo(({ user }) => {
  console.log('Rendering:', user.name);
  return <div>{user.name} - {user.age} years old</div>;
}, userPropsAreEqual);

export default UserComponent;

Ici, le composant UserComponent utilise la fonction userPropsAreEqual pour vérifier si id et name de l'utilisateur n'ont pas changé. Si ces champs sont identiques entre les rendus, le composant ne se met pas à jour, même si d'autres champs comme age peuvent changer.

Conclusion

Utiliser React.memo est une excellente manière de booster les performances de tes applications React, particulièrement dans des cas où les composants avec des props complexes sont fréquemment mis à jour. Cela permet de limiter les rendus coûteux et de rendre ton application plus rapide et plus réactive.

Pour approfondir tes connaissances en développement avec React et améliorer tes compétences en optimisation et en architecture d'applications, voici une liste de notions et de concepts intéressants à explorer :

  1. Hooks personnalisés : Apprends à créer tes propres hooks pour réutiliser la logique d'état et d'effets dans tes composants.

  2. Contexte (Contexts API (React)) : Explore comment utiliser le Context API pour partager des données globalement entre plusieurs composants sans avoir à passer explicitement les props à chaque niveau.

  3. Render Props : Découvre comment passer une fonction qui retourne un élément React à un composant, permettant de contrôler le rendu depuis l'extérieur.

  4. Portails (Portals (React)) : Utilise les portails pour rendre des enfants dans un DOM node différent de celui du composant parent, utile pour les modales, les pop-ups, et les tooltips.

  5. Fragments (React) : Apprends à utiliser les fragments pour regrouper une liste de enfants sans ajouter de nœuds supplémentaires au DOM.

  6. Suspense et lazy loading : Comprends comment utiliser React.Suspense et React.lazy pour le chargement paresseux de composants et la gestion élégante des états de chargement.

  7. Concurrent Mode : Explore le mode concurrent de React pour améliorer l'interactivité des applications en permettant à React de préparer plusieurs versions de l'interface utilisateur en arrière-plan.

  8. Server-Side Rendering (SSR) : Découvre comment rendre tes applications React côté serveur pour améliorer le temps de chargement initial et le référencement SEO.

  9. Static Site Generationavec Next.js : Apprends à générer des sites statiques avec React en utilisant des frameworks comme Next.js, ce qui peut améliorer la performance et la gestion du cache.

Chaque notion peut t'ouvrir des portes sur des techniques et des stratégies différentes pour construire des applications robustes, performantes et maintenables.