React.memo et ses utilisations

1. Qu’est-ce que React.memo
2. Que fait React.memo

React est populaire car il permet aux développeurs de créer des applications dynamiques.

Cependant, le comportement par défaut des composants React est inefficace. La bibliothèque comprend PureComponent pour les composants de classe et React.memo HOC pour les composants fonctionnels afin de résoudre ce problème.

Ces solutions peuvent réduire le nombre de mises à jour des composants et rendre les applications React beaucoup plus efficaces. Cet article explorera ce que fait React.memo et comment l’utiliser.

Qu’est-ce que React.memo

React.memo est un composant d’ordre supérieur, qui s’enroule autour des composants de fonction normaux dans React.

Si le composant n’a pas d’effets secondaires et rend la même sortie avec les mêmes accessoires, React.memo peut améliorer la vitesse et les performances de votre composant.

L’application enveloppée dans le composant d’ordre supérieur React.memo et tous ses enfants ne seront restitués que si les accessoires changent. Les composants enfants de l’arborescence seront également restitués si leur état local ou leur contexte change.

Voici un exemple de composant enveloppé dans le HOC React.memo :

const App = React.memo(() => {
  return <p>Hello World</p>;
});

Toute arborescence de composants sous le composant App sera également influencée. Voici un lien vers le playcode.

Que fait React.memo

Tous les composants de React ont une méthode par défaut shouldComponentUpdate(), qui déclenche de nouveaux rendus chaque fois que leurs propres accessoires ou ceux de leurs parents changent.

Envelopper un composant dans le HOC React.memo peut modifier ce comportement par défaut. Une fois encapsulée, la méthode shouldComponentUpdate() sera modifiée, et le composant et tous ses enfants ne seront rendus que si l’état local ou les accessoires changent.

La méthode effectuera une comparaison superficielle de l’état et des accessoires pour déterminer quand effectuer un nouveau rendu. Si vous regardez l’ordre dans lequel les méthodes de cycle de vie sont appelées, shouldComponentUpdate() vient toujours avant la méthode de rendu, comme il se doit.

Ainsi, le shouldComponentUpdate() sera appelé à chaque fois que les props changent. Mais le composant et les enfants ne seront restitués que si la comparaison superficielle détermine que leurs accessoires ont changé.

Gains de performances

En réduisant les mises à jour inutiles, la mémorisation (encapsulation d’un composant React dans React.memo HOC) peut améliorer considérablement les performances de votre application.

Vous pouvez envelopper votre composant dans React.memo, ou vous pouvez envelopper sélectivement certaines branches de l’arborescence des composants. Vous pouvez utiliser des outils de profilage pour trouver s’il y a suffisamment d’inefficacités dans votre application pour justifier l’utilisation de React.memo.

En règle générale, faire la comparaison superficielle sur les objets props est toujours moins cher que d’appeler React.createElement() et de comparer des arborescences de composants entières.

Cependant, si votre composant a des props de comparaison approfondie, la comparaison superficielle de React.memo sera insuffisante. De plus, ce composant d’ordre supérieur ne fonctionne pas si votre composant reçoit et affiche des valeurs de prop enfants.