Devo envolver todos os meus componentes com React.memo () se não estiver esperando nenhum suporte?

Aug 18 2020

Embora seja óbvio por Reactque não executa React.memo para todos os seus componentes funcionais por padrão, devemos nós mesmos embrulhar nossos componentes funcionais como e quando necessário.

No meu caso, tenho um grande projeto de reação com uma estrutura 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 a minha lógica de negócios está dentro do redux e os componentes usam useSelectorinternamente para obter dados da loja.

Faz sentido envolver todos os meus componentes filhos React.memo, já que uma mudança em qualquer seletor no nível raiz faz com que meu aplicativo inteiro seja renderizado novamente?

Anteriormente connect, estávamos obtendo automaticamente um componente memoized que comparava adereços personalizados e valor armazenado passado como adereços para o componente, então agora devemos sempre fazer manualmente React.memoao usar useSelectorem um componente que não recebe nenhum adereço?

Respostas

1 BryanDowning Aug 18 2020 at 06:08

Eu diria que você deve considerar o uso React.memopara os componentes filhos que não aceitam acessórios. Eu recomendo fortemente este artigo:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 Componente renderiza frequentemente com os mesmos adereços
O melhor caso de empacotar um componente em React.memo () é quando você espera que o componente funcional renderize frequentemente e normalmente com os mesmos adereços.

Como os componentes sobre os quais você está perguntando não aceitam nenhum adereço, isso significa que os adereços nunca mudarão. Portanto, é lógico que o uso React.memo pode evitar ciclos de renderização. Observe esta advertência importante do mesmo artigo:

5. React.memo () é uma dica de desempenho
Estritamente, o React usa memoização como uma dica de desempenho.

Embora na maioria das situações o React evite renderizar um componente memoized, você não deve contar com isso para evitar a renderização.