Performance Optimization Techniques for React Apps

“Software developers are students forever 🧠”

Sobre   |    Descrição   |    Instalação   |    Desafios   |    Tecnologias

💬 Sobre

Essa aplicação foi construída para aprender algumas técnicas de performance do React.

Uma nova renderização tem o seguinte fluxo:

1. O React gera uma nova versão do componente que precisa ser "renderizado".
2. Compara essa nova versão com a versão anterior já salva na página.
3. Se houverem alterações, o React "renderiza" essa nova versão em tela.

Também ocorrem de três formas:

1. Pai para filho: quando o componente PAI sofre alteração, o componente FILHO será atualizado.
2. Propriedade: quando uma propriedade atualiza.
3. Hooks: useState, useContext, useReducer, entre outros...

🗨️ Descrição

Memo

Técnica utilizada para performar componentes. Não deixa atualizar a renderização.

Trás alguns benefícios quando utilizado em:

• Componentes puros.
• Componentes que renderizam muito.
• Quando um componente renderiza com as mesmas props.
• Quando o projeto está de médio para grande.

Exemplo de aplicação:

export const ProductItem = memo(ProductItemComponent, (prevProps, nextProps) => {
  return Object.is(prevProps.product, nextProps.product);
});

useMemo

É uma forma para performar algo complexo (geralmente cálculos) dentro da aplicação.

Dois casos de uso são:

• Cálculos pesados.
• Igualdade referencial (quando passa uma informação a um componente filho).

useCallback

Usado para igualdade referencial de funções. Utilizado geralmente quando se tem prop drilling.

Também deve-se transformar a função em uma constante:

const addToWishlist = useCallback(async (id: number) => {
  console.log(id);
}, []);

Formatação de Dados

Os dados devem ser formados sempre na chamada da API (quando possível) e não na exibição.

Evita processamento e gargalos.

Dynamic Import (Code Splitting)

No bundle React, todas as importações são carregadas. Com o Code Splitting é possível definir a importação somente quando o usuário for usar a funcionalidade, deixando assim a aplicação mais performática.

Exemplo:

const AddProductToWishlist = dynamic<AddProductToWishlistProps>(() => {
  return import("./AddProductToWishlist").then((mod) => mod.AddProductToWishlist);
}, {
  loading: () => <span>Carregando...</span>,
});

Virtualização

Carrega somente um número específico de itens para serem renderizados.

São úteis para UX e desempenho na aplicação.

Bundle Analyzer

Verifica quais dependências são maiores. Dessa forma é possível ver possíveis gargalos na aplicação durante o build.

O bundle pode ser visualizado abaixo. Nele o lodash se destaca:

Bundle Analyzer

⚠️ Instalação

# Instalar as dependências necessárias:
$ yarn

# Iniciar o servidor:
$ yarn server

# Iniciar o projeto:
$ yarn dev

🚩 Desafio

Aplicabilidade das técnicas apresentadas acima.

✔️ Tecnologias

• ReactJS

---

by Douglas Scaini ❤️