Ah, reaja! Nossa querida biblioteca para construção de UIs. É a poção mágica que faz com que nossos aplicativos da web pareçam interativos e rápidos – até que um dia isso não acontece. De repente, você percebe que as coisas estão ficando mais lentas. Clicar em um botão é como enviar uma carta por um pombo-correio. Seu aplicativo passa de extremamente rápido a lento no intervalo do café, e os usuários começam a dar a você "a aparência".

Mas não se preocupe! Assim como o café pode resolver a maioria dos problemas da vida (ou assim gostaríamos de pensar), algumas técnicas importantes podem turbinar seu aplicativo React e trazê-lo de volta à velocidade máxima. Vamos explorar 6 maneiras simples de otimizar seu aplicativo React, para que seja mais rápido do que seu aumento diário de cafeína.

1. Divisão de código: carregando apenas o que você precisa

Já entrou em uma sala, acendeu todas as luzes e percebeu que só precisava de uma? Isso é o que seu aplicativo React faz quando você agrupa tudo em um grande bloco. Em vez disso, com a divisão de código, você carrega apenas as partes do seu aplicativo que são necessárias no momento. É como acender as luzes cômodo por cômodo!

Usar React.lazy() e Suspense é uma maneira perfeita de implementar isso:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    Loading...}>
      
  );
}

Por que isso ajuda: a divisão de código reduz o tempo de carregamento inicial do seu aplicativo adiando o carregamento de código não utilizado até que seja necessário. Os usuários não terão que esperar o aplicativo inteiro carregar antes de ver algo na tela.

2. Imagens de carregamento lento: não carregue todos os lanches de uma vez

Imagine pedir uma pizza e receber mantimentos para um ano. Parece ridículo, certo? Bem, isso é o que acontece quando você carrega todas as suas imagens antecipadamente. Em vez disso, carregue imagens lentamente, para que você busque apenas o necessário, como pedir uma pizza por vez.

Usar uma biblioteca como react-lazyload é uma solução rápida:

import LazyLoad from 'react-lazyload';

Por que isso ajuda: Ao carregar imagens lentamente, você reduz o tempo de carregamento inicial da página e só baixa imagens quando elas são necessárias, melhorando o desempenho e a experiência do usuário.

3. useCallback e useMemo: aumento de memória para React

Assim como você reutiliza a mesma caneca de café para economizar tempo na lavagem, o React pode reutilizar valores e funções se você permitir! useCallback e useMemo são ganchos que ajudam a armazenar cálculos ou funções caras, para que não sejam recalculados em cada renderização.

useMemo Exemplo:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

useCallback Exemplo:

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

Por que isso ajuda: Com useMemo, o React não terá que refazer cálculos caros desnecessariamente. E useCallback impede que você crie uma nova função a cada renderização. Isso mantém o React funcionando perfeitamente – como atualizar sua RAM!

4. Memoização com React.memo: Pare de re-renderizações desnecessárias

Você tem aquele amigo que repete a mesma história indefinidamente? O React também pode ser assim: re-renderizar componentes mesmo quando não é necessário! É aqui que entra o React.memo, evitando que o React renderize novamente os componentes, a menos que seus adereços sejam alterados.

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

Por que isso ajuda: React.memo é como dizer ao React: “Ei, você já ouviu isso antes! Não se repita a menos que haja algo novo.” Evita novas renderizações desnecessárias, economizando tempo e recursos.

5. Gerenciando o estado com eficiência: levante-o somente quando necessário

Elevar o estado é um padrão comum no React, mas às vezes somos culpados de elevá-lo muito ou gerenciar muito estado nos lugares errados. Isso pode causar re-renderizações excessivas. Mantenha o estado local para os componentes sempre que possível e evite novas renderizações desnecessárias, elevando o estado apenas quando for realmente necessário.

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

Por que isso ajuda: Ao gerenciar o estado com mais cuidado e aumentá-lo somente quando necessário, você pode evitar novas renderizações desnecessárias de componentes irmãos. Isso mantém seu aplicativo focado e eficiente.

6. Debatendo a entrada do usuário: acalme-se, reaja!

Imagine alguém digitando freneticamente em uma barra de pesquisa e seu aplicativo tentando processar cada pressionamento de tecla. O pobre React provavelmente está suando muito! Insira o debouncing - o processo de lidar apenas com a entrada após uma pausa do usuário, em vez de a cada pressionamento de tecla.

Usar lodash.debounce pode resolver este problema:

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

Por que isso ajuda: Em vez de o React ter um ataque de pânico a cada pressionamento de tecla, o debouncing dá uma pausa. Isso garante melhor desempenho ao lidar com entradas do usuário em tempo real, como campos de pesquisa ou formulário.

Conclusão: Otimizar aplicativos React não é ciência de foguetes - é mais como garantir que você não beba seis cafés de uma vez! Da divisão de código ao carregamento lento de imagens, essas técnicas ajudarão você a manter seu aplicativo React rápido e responsivo. Então, da próxima vez que seu aplicativo começar a ficar lento, lembre-se: não é culpa do React - ele só precisa de um pouco de otimização!

Lembre-se de que otimizar um aplicativo React é um equilíbrio. Você não precisa incluir todas essas técnicas imediatamente. Em vez disso, identifique os gargalos do seu aplicativo, aplique as otimizações apropriadas e observe seu aplicativo ficar mais rápido do que você consegue terminar seu café!

Obrigado pela leitura, se gostou do post compartilhe e deixe sugestões.

---

---

Conecte-se comigo

Site: Hardik Gohil

Github: https://github.com/HardikGohilHLR

Linkedin: https://www.linkedin.com/in/hardikgohilhlr

Obrigado ❤️