Ao criar aplicativos da Web modernos, o desempenho é fundamental. Os usuários esperam aplicativos rápidos e responsivos, e mesmo um pequeno atraso pode causar frustração. O React, embora poderoso, às vezes pode sofrer gargalos de desempenho, especialmente à medida que os aplicativos crescem em tamanho e complexidade. Felizmente, existem várias técnicas para otimizar o desempenho, incluindo memoização, carregamento lento e muito mais.

Neste guia, detalharemos algumas das maneiras mais eficazes de otimizar o desempenho em seus aplicativos React. Abordaremos os conceitos básicos de memoização, carregamento lento e ferramentas como o React Profiler para ajudá-lo a identificar e corrigir gargalos. Vamos começar!

Introdução: Por que o desempenho é importante em aplicativos React modernos

Pense em seu aplicativo da web como um carro – não importa o quão elegante ele pareça por fora, se não funcionar bem, a experiência do usuário será prejudicada. Em aplicativos React, esse “desempenho” refere-se à rapidez com que seus componentes são renderizados e com que eficiência eles são atualizados quando os dados ou o estado mudam.

À medida que seu aplicativo React é dimensionado, renderizar novamente componentes desnecessariamente ou carregar pacotes pesados ​​de uma só vez pode levar a um desempenho mais lento. É por isso que aprender técnicas de otimização de desempenho do React é crucial para construir aplicativos suaves e de alto desempenho.

Memoização em React

Como usar React.memo e useMemo de maneira eficaz

Memoização é uma palavra sofisticada que significa simplesmente armazenar em cache o resultado de uma chamada de função para que você não precise recalculá-lo todas as vezes. No React, a memorização ajuda a evitar novas renderizações desnecessárias, lembrando o resultado de uma renderização anterior e usando o resultado armazenado em cache se nada tiver mudado.

React.memo

Vamos começar com React.memo. Este componente de ordem superior evita que um componente seja renderizado novamente se seus adereços não tiverem sido alterados.

Exemplo:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

Neste exemplo, MyComponent só será renderizado novamente se o name prop for alterado. Se você passar o mesmo valor de nome, o React irá pular a renderização, melhorando o desempenho.

useMemo

Em seguida, há useMemo. Este gancho é usado para memorizar cálculos ou valores caros dentro de seus componentes funcionais.

Exemplo:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

Aqui, o cálculo só é executado novamente quando o array de itens muda, economizando tempo ao evitar recalcular o mesmo resultado em cada renderização.

Componentes de carregamento lento

Melhorando os tempos de carregamento com React.lazy

O carregamento lento é uma técnica em que os componentes são carregados somente quando são necessários, em vez de carregar tudo antecipadamente. Isso ajuda a reduzir o tempo de carregamento inicial do seu aplicativo, tornando-o mais rápido.

React fornece uma função integrada chamada React.lazy() que permite carregar componentes sob demanda.

Exemplo:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...}>
      
    
  );
}

Neste exemplo, MyComponent só será carregado quando for realmente necessário. O componente Suspense fornece uma UI substituta (como um botão giratório de carregamento) enquanto o componente está sendo buscado, tornando a experiência do usuário mais suave.

React Profiler para monitoramento de desempenho

Como identificar gargalos

É difícil otimizar algo que você não pode medir. É aí que entra o React Profiler. O React Profiler permite que você rastreie o desempenho de seus componentes, identifique renderizações lentas e meça o “custo” de novas renderizações.

Para usar o React Profiler, simplesmente envolva uma árvore de componentes com e forneça uma função de retorno de chamada para coletar os dados de desempenho.

Exemplo:

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

Usando o Profiler, você pode acompanhar quanto tempo cada componente leva para renderizar e encontrar áreas onde o desempenho pode ser melhorado, como novas renderizações desnecessárias.

Outras estratégias de otimização

Divisão de código, otimização de manipulação de eventos e muito mais

Além da memoização e do carregamento lento, existem várias outras técnicas para melhorar o desempenho do seu aplicativo React:

1. Divisão de código: divida seu aplicativo em pedaços menores que podem ser carregados sob demanda usando o recurso de divisão de código do Webpack. Isso reduz o tamanho inicial do pacote.

   const OtherComponent = lazy(() => import('./OtherComponent'));

1. Otimização de manipulação de eventos: Use o gancho useCallback para memorizar manipuladores de eventos, evitando que sejam recriados em cada renderização.

   const handleClick = useCallback(() => {
     console.log('Clicked');
   }, []);

1. Debouncing e Throttling: Otimize os ouvintes de eventos, como rolagem ou redimensionamento, debouncing ou throttling para limitar a frequência das atualizações.

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

Conclusão: Construindo Aplicativos React de Alto Desempenho com Essas Técnicas

Construir aplicativos React rápidos e eficientes requer uma combinação de técnicas. Usando memoization com React.memo e useMemo, você pode evitar novas renderizações desnecessárias. Componentes Carregamento lento com React.lazy permitem melhorar o tempo de carregamento buscando componentes apenas quando eles são necessários. O React Profiler ajuda a identificar gargalos de desempenho e otimizá-los.

Combinado com estratégias como divisão de código e otimização de eventos, você pode garantir que seus aplicativos React ofereçam uma experiência de usuário suave e responsiva, mesmo à medida que crescem em tamanho e complexidade.

Pronto para levar o desempenho do seu aplicativo React para o próximo nível? Experimente essas técnicas de otimização em seus projetos e observe a velocidade do seu aplicativo melhorar!

Se você gostou deste artigo, considere apoiar meu trabalho:

• Compre-me um café
• Agende uma ligação para orientação ou aconselhamento profissional
• Siga-me no Twitter
• Conecte-se no LinkedIn