¿Debo envolver todos mis componentes con React.memo () si no espera ningún accesorio?
Si bien es obvio por qué React
no 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 useSelector
internamente 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 connect
que 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.memo
durante el uso useSelector
de un componente que no reciben ningún accesorio?
Respuestas
Yo diría que debería considerar usar React.memo
para 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.