¿Debo envolver todos mis componentes con React.memo () si no espera ningún accesorio?

Aug 18 2020

Si bien es obvio por qué Reactno ejecuta React.memo a todos sus componentes funcionales por defecto, y nosotros mismos deberíamos envolver nuestros componentes funcionales cuando sea necesario.

En mi caso, tengo un gran proyecto de reacción con una estructura como esta:

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 */}
   </>
  );
};

Toda mi lógica comercial está dentro de redux y los componentes se utilizan useSelectorinternamente para obtener datos de la tienda.

¿Tiene sentido envolver todos mis componentes secundarios con React.memo, ya que un cambio en cualquier selector en el nivel raíz hace que toda mi aplicación se vuelva a renderizar?

A principios de la connectque se nos ofrecía de forma automática un componente memoized que fue comparando los apoyos personalizados y almacenar el valor pasado como accesorios para el componente, por lo que debemos ahora manualmente siempre hacer React.memodurante el uso useSelectorde un componente que no reciben ningún accesorio?

Respuestas

1 BryanDowning Aug 18 2020 at 06:08

Yo diría que debería considerar usar React.memopara aquellos componentes secundarios que no aceptan ningún accesorio. Recomiendo ampliamente este artículo:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 El componente se renderiza a menudo con los mismos accesorios
El mejor caso de encapsular un componente en React.memo () es cuando se espera que el componente funcional se procese a menudo y normalmente con los mismos accesorios.

Dado que los componentes sobre los que pregunta no aceptan ningún accesorio, eso significa que los accesorios nunca cambiarán. Por lo tanto, es lógico pensar que el uso React.memo podría evitar los ciclos de renderizado. Tenga en cuenta esta importante advertencia del mismo artículo:

5. React.memo () es una pista de rendimiento
Estrictamente, React usa la memorización como una pista de rendimiento.

Si bien en la mayoría de las situaciones React evita renderizar un componente memorizado, no debe contar con eso para evitar el renderizado.