Como melhorar a performance do seu Projeto com ReactJS

Daniel Lopes -

Quando começamos a aprender a programar nós nos preocupamos em fazer as coisas funcionarem primeiro, e isso é mais do que normal, inclusive, é esperado que um programador iniciante parta por esse caminho.

Mas, com o passar do tempo vamos aprendendo mais skills, e aí começamos a procurar saber mais sobre como melhorar o nosso código, adicionando um código mais limpo, uma arquitetura mais organizada e também pensamos como melhorar a performance do nosso software. Para isso, precisamos saber algumas coisas, nesse post quero te trazer uma dica simples e importante para melhorar suas aplicações feitas com ReactJS.

Mas antes…

O que é performance?

A performance de um software se refere à medida de quão bem um programa ou sistema de software atende aos requisitos de desempenho estabelecidos para ele. Em outras palavras, é a capacidade de um software de executar suas funções de maneira eficiente e eficaz, dentro dos limites de recursos disponíveis, como tempo de processamento, memória, largura de banda de rede e outros recursos do sistema.

A performance de um software é um aspecto crítico, pois impacta diretamente a experiência do usuário e a utilidade do sistema. Uma performance inadequada pode resultar em atrasos, lentidão, travamentos e, em última análise, na insatisfação do usuário. Portanto, é importante medir, monitorar e otimizar o desempenho do software ao longo do ciclo de vida do desenvolvimento e após a implantação.

Por que se preocupar com performance?

  1. Tempo de resposta: Refere-se ao tempo que leva para o software responder a uma ação do usuário. Quanto menor o tempo de resposta, mais responsivo o software é.
  2. Uso eficiente de recursos: Isso envolve o uso otimizado de recursos de hardware, como CPU, memória e armazenamento. Um software que consome muitos recursos pode prejudicar o desempenho do sistema como um todo.
  3. Escalabilidade: A capacidade do software de lidar com um aumento na carga de trabalho sem degradação significativa do desempenho. Um sistema escalável pode acomodar mais usuários ou processar mais dados sem problemas.
  4. Estabilidade: Um software deve ser robusto e não travar com frequência. A estabilidade está relacionada à capacidade do software de lidar com erros e exceções de forma adequada.
  5. Taxa de transferência: A capacidade do software de processar e entregar dados em um período de tempo específico. Isso é importante em sistemas que lidam com grande volume de dados, como servidores de banco de dados e aplicativos de streaming.
  6. Eficiência de algoritmos: A eficiência dos algoritmos e estruturas de dados usados no software pode afetar significativamente o desempenho. Algoritmos ineficientes podem resultar em processamento lento.
  7. Otimização de consultas e acesso a dados: Em sistemas que dependem de bancos de dados, a otimização de consultas é fundamental para melhorar o desempenho. Consultas mal otimizadas podem resultar em lentidão no acesso aos dados.
  8. Cache e armazenamento em memória: O uso estratégico de cache e armazenamento em memória pode acelerar o acesso a dados frequentemente usados, reduzindo a necessidade de consultas repetitivas ao banco de dados ou operações intensivas de cálculo.

Códigos que consomem recursos desnecessários

A aplicação que abordaremos é uma lista de tarefas que tem integração com uma API.

Analise o código abaixo:

Note que após adicionar uma nova tarefa a função handleAddTask chama a função getTasks e uma nova requisição para o backend é feita.

Mas será que não poderíamos melhorar esse código e evitar mais uma requisição? A resposta é sim, e é mais fácil do que você imagina.

Ao analisar a aba Rede (Network) da aplicação durante a adição de uma nova tarefa, verifiquei que a requisição do tipo POST, que adiciona uma nova tarefa, tem um retorno com os dados da tarefa que foi adicionada.

Pensando nessa situação o código ficaria muito simples para que a terceira requisição não ocorresse mais, veja abaixo:

Note que após inserir a nova tarefa, eu obtenho os dados do retorno da API, e faço a manipulação do estado, de forma que as tarefas existentes continuarão lá, porém a nova tarefa também será adicionada a essa listagem. Como todos sabemos, toda vez que um estado é atualizado, isso causa uma renderização do JSX.

Dessa forma, a partir de agora, a cada requisição para adicionar uma nova tarefa, nós economizamos uma requisição para listar as tarefas.

Em uma aplicação pequena, rodando em ambiente de desenvolvimento (local), pode parecer que não há tanto impacto, mas imagine utilizar essa técnica em uma aplicação grande, onde várias operações como essa são realizadas? Pois é, a experiência do seu usuário será muito melhor, além de que você estará economizando recursos do seu backend.

Conclusão:

Nessa postagem, o meu objetivo era trazer para você uma clareza de que performance nem sempre tem a ver com grandes melhorias de código, às vezes as modificações podem ser pequenas, mas com grandes impactos. Termino aqui encorajando você a revisitar os seus códigos e aplicar esses conceitos simples e objetivos.

Lembre-se sempre de adequar a realidade da biblioteca que você está utilizando, tudo isso pode ser feito com elas, seja VueJS, Angular, Svelte ou até mesmo com VanillaJS.

Confira outros conteúdos sobre ReactJS:

FAQs:

1. O que é ReactJS?
ReactJS é uma biblioteca JavaScript utilizada para construir interfaces de usuário interativas e eficientes. Desenvolvida pelo Facebook, ela é amplamente usada na criação de aplicações web modernas.

2. Por que a performance é importante em projetos React?
A performance é crucial para garantir uma experiência de usuário fluida e responsiva. Uma aplicação lenta pode frustrar os usuários e afetar negativamente a retenção e a satisfação dos clientes.

3. Como medir a performance de um projeto React?
Você pode usar ferramentas como Lighthouse, Chrome DevTools, e outras extensões de navegador para avaliar métricas de performance como tempo de carregamento, TTI (Time to Interactive) e FPS (Frames per Second).

4. O que são componentes "re-rendering" e como evitá-los?
O "re-rendering" ocorre quando um componente é renderizado novamente, mesmo que suas propriedades não tenham mudado. Para evitá-lo, utilize o método shouldComponentUpdate ou utilize Hooks como React.memo e useMemo.

5. O que são React Hooks e como podem ser usados para melhorar a performance?
Hooks são funções que permitem usar estado e outros recursos do React em componentes funcionais. Eles podem melhorar a performance ao evitar a necessidade de criar classes e métodos de ciclo de vida.

Confira outros conteúdos:

Como comecei a programar e me tornei professor
Por que fazer um curso de Design UX UI?
Programador precisa de diploma?
Como ser Mãe e Estudante de Tecnologia! Histórias para te inspirar
Cubos Academy