Uma explicação detalhada do React.memo com um exemplo.

O que são componentes de ordem superior no React?

Um componente de ordem superior (HOC) é uma técnica avançada no React para reutilizar a lógica do componente, conforme mencionado no React Docs. Um HOC não faz parte da API React, mas é apenas uma função com um componente como argumento e retorna um novo componente.

O que é React.memo?

Como mencionado no título, React.memo é uma função de ordem superior . Ele é usado para memorizar o resultado do nosso componente, o que ajuda a aumentar o desempenho do nosso aplicativo React.

Em termos simples, se nosso componente retornar o mesmo resultado para os mesmos valores de prop passados ​​a ele, renderizar o mesmo resultado arruinará o desempenho do aplicativo. Um memorando React é a solução para este problema. Nós apenas precisamos envolver nosso componente em uma chamada para React.memo , então o React irá pular a renderização do componente e reutilizar o resultado renderizado anterior.

Exemplo

Agora, vamos considerar um exemplo simples para esclarecer o conceito com mais precisão. Suponha que temos um componente pai e um componente filho. Agora, sempre que o componente pai for renderizado novamente devido a suas próprias mudanças de estado, um componente filho também será renderizado novamente, o que é uma natureza comum do React. Aqui, não há mudanças de estado acontecendo no componente filho, o que significa que a renderização desnecessária de um componente filho afetará o desempenho. Para resolver este problema, precisamos apenas envolver nosso componente filho em um React.memo, para que o React use o resultado renderizado anterior.

Veja o exemplo abaixo. Em nosso exemplo, temos um componente pai que imprime valor1 e um componente filho que imprime valor2 na exibição do navegador.

No primeiro caso, sem usar Memo , o componente filho renderiza novamente nas alterações em ambos os valores, o que é chamado de desempenho ruim porque o componente filho usa apenas value2 como prop.

Nosso segundo caso usando o Memo é a solução para este problema. Nesse caso, eu envolvi o componente filho no React Memo, então ele só será renderizado novamente quando value2 for alterado.

Componente pai:

Componente filho:

Caso 1: Sem Exemplo e Saída de React Memo

Caso 2: Com Exemplo e Saída de React Memo

React.memo vs useMemo()

O React Memo é um HOC que recebe um componente React como argumento e é usado para memorizar o resultado do componente passado para ele. Por outro lado, useMemo() é um hook do React que pegará uma função e um array de dependências e então memorizará o valor retornado da função passada para ele. Se você ainda está confuso, não se preocupe. Vá e verifique meu outro artigo sobre o gancho useMemo() e ele o ajudará a entender a diferença entre ambos.

Conclusão

O objetivo deste artigo é entender o conceito de React.memo, um componente de ordem superior no React. Eu demonstrei seu caso de uso usando um exemplo simples de componentes pai-filho. Também anexei os vídeos exibindo a saída. As saídas do console em ambos os cenários ajudarão você a rastrear a contagem de re-renderização de nosso componente filho. Espero que este artigo ajude você a entender o React Memo em detalhes. Por favor, siga-me para ler artigos mais interessantes como este.

Mais conteúdo em PlainEnglish.io . Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter e LinkedIn . Confira nosso Discord da Comunidade e junte-se ao nosso Coletivo de Talentos .