Dois-je envelopper tous mes composants avec React.memo () s'il n'attend aucun accessoire?

Question

Alors qu'il est évident pourquoi Reactn'effectue pas React.memo à tous ses composants fonctionnels par défaut, et nous devrions nous-mêmes envelopper nos composants fonctionnels au fur et à mesure des besoins.

Dans mon cas, j'ai un gros projet de réaction avec une structure comme celle-ci:

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

Toute ma logique métier est à l'intérieur de redux et les composants sont utilisés en useSelectorinterne pour obtenir des données du magasin.

Est-il judicieux d'encapsuler tous mes composants enfants avec React.memo, car une modification d'un sélecteur au niveau racine entraîne le rendu de l'ensemble de mon application?

Auparavant, connectnous obtenions automatiquement un composant mémorisé qui comparait les accessoires personnalisés et la valeur de stockage transmise comme accessoires au composant, alors devrions-nous maintenant toujours le faire manuellement React.memoen utilisant useSelectordans un composant ne recevant aucun accessoire?

Answer 1

Je dirais que vous devriez envisager d'utiliser React.memopour ces composants enfants qui n'acceptent aucun accessoire. Je recommande vivement cet article:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 Le composant est souvent rendu avec les mêmes accessoires
Le meilleur cas pour envelopper un composant dans React.memo () est lorsque vous vous attendez à ce que le composant fonctionnel soit rendu souvent et généralement avec les mêmes accessoires.

Puisque les composants que vous demandez n'acceptent aucun accessoire, cela signifie que les accessoires ne changeront jamais. Par conséquent, il va de soi que l'utilisation React.memo pourrait éviter les cycles de rendu. Notez cette mise en garde importante du même article:

5. React.memo () est une indication de performance
Strictement, React utilise la mémorisation comme une indication de performance.

Alors que dans la plupart des situations, React évite de rendre un composant mémorisé, vous ne devriez pas compter dessus pour empêcher le rendu.