React Memo: boosting react performance react with Simple Memoization

Introduction

Les applications réagissent souvent avec de grands ensembles de données et des composants complexes, où les redevateurs inutiles peuvent avoir un impact significatif sur les performances. Pour y remédier, React propose React.Memo - un outil simple mais puissant pour optimiser les composants et réduire les temps de rendu. Dans ce guide, nous explorerons comment fonctionne le mémo React, pourquoi il est utile et comment l'implémenter étape par étape.

Qu'est-ce que React Memo?

react.memo est un composant d'ordre supérieur (HOC) dans React qui aide à mémoriser les composants fonctionnels. La mémorisation est le processus de mise en cache de la sortie d'une fonction en fonction de ses entrées, de sorte que la fonction n'a pas à recomputer le résultat pour les mêmes entrées. React Memo fonctionne de manière similaire: il «se souvient» de la dernière sortie rendue d'un composant et ne le réalise que lorsque ses accessoires changent.

Pourquoi réagir le mémo?

Dans React, les composants renvoient chaque fois que leurs composants parents renforcent. Cela peut provoquer des inefficacités si la sortie d'un composant ne dépend pas des modifications de son parent. Par exemple, dans des UI complexes avec de nombreux composants, vous pouvez voir du retard en raison de redevances excessives. L'utilisation de React Memo peut optimiser cela en mettant uniquement à la mise à jour les composants lorsque cela est nécessaire.

Problèmes REACT Memo résout

1. Re-inutiles des redesseurs

Lorsqu'un composant parent redémarre, ses composants enfants rendent également. Cela peut conduire à des goulots d'étranglement de performances, surtout lorsque les composants affichent des données statiques ou s'appuient sur des accessoires immuables.

2.

Les applications avec des composants profondément imbriquées peuvent faire face à des performances lents en raison de redevateurs cumulatifs. La mémorisation, avec React Memo, aide à prévenir les redépendants des composants qui ne nécessitent pas de mises à jour, améliorant la réactivité de l'application.

Comment fonctionne le mémo: exemple étape par étape

passons une implémentation de base de React Memo. Nous allons commencer par un composant simple qui n'utilise pas de mémoires et voir comment l'ajout de React Memo fait une différence.

Étape 1: Configurez un composant de compteur simple sans mémo de réaction

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

Explication

Dans cet exemple, chaque fois que vous tapez le champ de saisie, le composant compteur redevde, même si la valeur de nombre reste la même. Ceci est une réapprovisionnement inutile que nous pouvons empêcher avec React Memo.

Étape 2: Optimisation avec React Memo

Maintenant, enveloppez le composant compteur avec react.memo pour l'optimiser.

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

Explication

Avec react.memo, le compteur de compteur ne redevère que si son compteur propose. Maintenant, la saisie du champ de saisie ne déclenche plus une nouvelle renforce de compteur, optimisant considérablement les performances.

React Memo en action: un scénario pratique avec des listes

Plongeons-nous dans un exemple plus complexe pour voir les véritables avantages de React Memo. Supposons que nous ayons une liste d'éléments avec un bouton «like» à côté de chaque élément. Nous montrerons comment React Memo peut empêcher des redevateurs excessifs lors de l'aime des éléments individuels.

Étape 1: Créez le composant de liste sans mémo

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like
    
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes   1 } : item
      )
    );
  };

  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

export default ItemList;

Problème

Dans le code ci-dessus, lorsque vous aimez un élément, tous les éléments renvoient, même si un seul élément aime le changement.

Étape 2: Optimiser le composant de l'article avec React Memo

const Item = React.memo(function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like ({item.likes})
    
  );
});

Résultat

Maintenant, seul l'élément que vous cliquez pour aimer renforcera, rendra l'interface utilisateur beaucoup plus rapide et plus efficace.

Quand utiliser React Memo?

React Memo est utile dans des scénarios spécifiques, mais l'utiliser partout peut compliquer votre code sans ajouter un réel avantage. Voici quelques situations clés où cela peut être particulièrement efficace:

1. Composants statiques : composants qui ne changent pas souvent, comme les en-têtes ou les pieds.
2. composants fonctionnels purs : composants qui dépendent uniquement des accessoires pour le rendu.
3. grandes listes de composants : listes avec de nombreux éléments qui ont besoin d'éviter les redesseurs inutiles.

Pièges et meilleures pratiques potentielles

1. Comparaison peu profonde : React Memo fait une comparaison peu profonde, ce qui signifie qu'il ne détectera pas les changements dans des objets ou des tableaux profondément imbriqués. Envisagez d'utiliser UseMemo ou UseCallback si vous passez des accessoires complexes.

2. Surveillance des performances : Utilisez React Devtools pour identifier les composants qui bénéficient réellement de la mémorisation. La surutilisation de mémo React peut conduire à la complexité du code avec des gains de performance négligeables.

Questions fréquemment posées (FAQ)

Q1: En quoi React Memo est-il différent d'Usememo et UseCallback?

• memo react Optimise les redevateurs de composants basés sur les accessoires.
• useMemo cache des valeurs calculées dans un composant.
• usecallback Caches Fonctions, empêchant les recréer sur chaque rendu.

Q2: Puis-je utiliser React Memo avec des composants de classe?

Non, le mémo React est uniquement pour les composants fonctionnels. Cependant, pour les composants de classe, un comportement similaire peut être obtenu avec PureComponent.

Conclusion

React Memo est un outil précieux pour réduire les redevateurs inutiles et augmenter les performances de l'application React. En l'utilisant sélectivement sur des composants fonctionnels purs ou des éléments d'interface utilisateur statiques, vous pouvez optimiser votre application React sans compliquer sa structure. Suivez ces étapes, essayez les exemples et continuez à expérimenter pour trouver les meilleures stratégies de mémorisation pour votre projet!