Otimização de desempenho em Reagir usando componentes puros e Memorando.

Sandeep Jayakumar Segue 14 de jul · 3 min ler

Este post pressupõe que você tenha um bom entendimento do React e esteja procurando várias maneiras de otimizar seus componentes.

Já passou algum tempo desde que comecei a escrever um pouco sobre otimização de desempenho no React. É claro que você pode fazer carregamentos preguiçosos e outras coisas para tornar um aplicativo otimizado e mais rápido. No entanto, aqui estarei falando sobre o uso de PureComponents (para componentes de classe) e React.memo (para componentes funcionais).

Então, onde devemos usá-los? Deixe-me mostrar um caso de uso em que isso é útil. Considere um componente de classe com um estado que contém um valor de contador de zero.

Eu tenho um botão que, quando clicado, mudaria o valor do contador acima. Assim, após cada clique de botão, meu estado será atualizado
e causar um rerender. O problema com o caso acima é que, mesmo se o próximo valor do contador for zero, o React ainda rerenderia o componente.
Aqui é onde podemos economizar algum desempenho.

Normalmente, o que podemos fazer é adicionar um método de ciclo de vida shouldComponentUpdate e permitir rerender apenas se os valores de estado forem diferentes. ie;

Em vez disso, há outra maneira de fazer o mesmo. Você pode usar um PureComponent em vez do componente normal. O PureComponent é o mesmo que Component
exceto que ele manipula shouldComponentUpdate por padrão. ie; você não precisa escrever o método shouldComponentUpdate . Portanto, se você estiver usando um PureComponent , o React renderizará novamente o componente apenas se o estado ou propensão no componente for alterado.

Isso é ótimo, não é? Mas você precisa saber um pouco mais antes de prosseguir.

Considere um componente de classe em que você altera diretamente um estado.

Considere que você tem uma matriz de itens, que é um estado que contém um conjunto de itens do seu carrinho de compras. Se você alterar seu estado diretamente, toda vez que precisar adicionar algo à matriz de itens como " this.state.items.push (item) " e
você chama um forceUpdate () ou setState como this.setState ({items: this.state.items}) , o componente certamente seria renderizado normalmente.

Agora, se você deseja otimizar um aplicativo que contém o código acima e tentar substituir um componente que aceita o estado dos itens como props, com um PureComponent , seu PureComponent não irá renderizar.

O PureComponents faz uma comparação superficial para detectar se o rerender é obrigatório ou não. ie; no caso de primitivos, o componente só faz a nova renderização se os valores forem diferentes. Mas, para tipos de referência, como arrays e objetos, a comparação superficial verificaria se a referência foi alterada ou não para o rerender. No caso acima, a mutação direta não cria uma nova referência, pois não é clonada em profundidade ou atualizada de forma imutável.
Portanto, se mutações diretas forem feitas, tais props ou estados alterados não serão detectados pelo nosso PureComponent, o que pode causar problemas durante a otimização dos componentes reagentes .

Agora, e os componentes funcionais? Você pode fazê-lo apenas colocando -o dentro do React.memo, o que fará com que o componente funcional só volte a renderizar se o prop ou estado mudar.

Obrigado pela leitura! 🙂