Como lidar com performance em aplicações ReactJS

Bruno Carvalho — Thu, 21 Dec 2023 01:15:00 +0000

Hoje vamos falar sobre performance em aplicações web utilizando ReactJS!!

Problemática

Atualmente é bem comum vermos aplicações muito focadas apenas em estilizações complexas ou com componentes que não possuem abstrações corretas e se tornam verdadeiros monstros, seja para manter ou realizar novas implementações. Tais práticas afetam diretamente algo que chamo de "alma do frontend", que é a boa experiência e praticidade para o usuário. Afinal no fim do dia, o que precisamos é construir um produto que cumpra seu papel e que o usuário se sinta bem utilizando.

Levando em conta os problemas citados, a performance da nossa aplicação é algo que é muito afetada por tais problemas e muitas vezes passa desapercebido no dia a dia, seja pelo tempo de entrega das features, prioridade de implementações, etc...

Problemas comuns

- Renderizações desnecessárias

O React implementa por conta própria o algoritmo de reconciliação, onde é feita a comparação entre DOM e virtual DOM, e assim feita a atualização de UI da aplicação. Porém, quando atualizamos um data ou props dos nossos componentes, pode ser que um novo gatilho para renderizar o componente seja disparado e componentes que não são afetados pela mudança sofram uma nova renderização, consumindo tempo e recursos de computação.

Para tentar solucionar esse problema, podemos utilizar hooks como useEffect e useMemo para que o componente ou valor sejam atualizados quando alguma prop ou data seja de fato alterada.

Atenção: cuidado com o uso de hooks como, useEffect, useCallback, useMemo. Por possuírem um array de dependências, podem receber gatilhos de re-renderização que irão comprometer ainda mais o processo de otimização da UI.

- Renderização de listas

Renderizar listas é uma prática bem comum em aplicações, e devido ao volume de dados que precisam ser listados, pode impactar diretamente na performance de renderização.

Nesse contexto, podemos utilizar a função React.memo para que o nosso componente de listagem seja re-renderizado apenas quando suas props sofram alterações. E também, de suma importância, utilizar a prop key={} para cada item da nossa listagem, para que o React possa encontrar facilmente cada elemento e assim otimizar a manipulação do DOM.

- Má gestão de estados

É bem comum encontrarmos componentes com inúmeros estados, sejam eles locais ou globais (utilizando contextAPI, por exemplo).
Quando não se tem o mapeamento correto da necessidade de cada estado e de como esse estado é atualizado, podem ocorrer inúmeras atualizações inúteis de UI ou até mesmo mudanças inesperadas de valores de propriedades.

- Otimização de imagens

Imagens são de extrema importância nas nossas aplicações, mas se forem apenas "jogadas" dentro de nossos componentes, com certeza nos trará dores de cabeça quando falamos de performance.

Faça a compressão das imagens, para que o tamanho deles seja otimizado sem que percam qualidade significativa;
Use tamanhos responsivos para que a imagem se adapte melhor ao dispositivo que o usuário está utilizando;
Utilize lazy loading para que a imagem seja carregada apenas quando necessário.

Ficou bem longo e denso o post 😅, e ainda existem diversos pontos que podemos abordar sobre performance (pretendo futuramente escrever sobre debbubing e utilização da react dev tools).

Se você chegou até aqui, agradeço pela leitura, esse é meu primeiro na comunidade e aceito qualquer feedback para melhorar os posts.

Sintam-se à vontade para entrar em contato comigo:

Linkedin
Email
Github