Siga essas dicas de ouro e destrua a performance com estilo.

Era uma sprint apertada, dessas que começam já com o relógio contra. O time corria, e o dev mais experiente assumiu a tarefa: “Deixa comigo, resolvo isso rápido com React.” Em poucas horas, tudo parecia pronto... a tela funcionava, os dados apareciam, os cliques respondiam. Mas então, aos poucos, o app começou a desacelerar. Pequenos travamentos, respostas lentas, scroll hesitante… ninguém entendia. O código estava limpo. O que poderia estar acontecendo?

Aqui vão 5 técnicas infalíveis para deixar seu app React mais lento que uma reunião que poderia ser um e-mail (qualquer semelhança com a realidade é mera coincidência).

1. Evite usar React.memo

Deixe seus componentes re-renderizarem o máximo possível. Especialmente os pesados. Nada como renderizar tudo novamente só porque uma prop mudou em outro canto da árvore.

// Claro que não!
const MeuComponente = React.memo(({ valor }) => {
  return <div>{valor}div>;
});

Use assim mesmo, sem memoização:

// Vamos renderizar sempre. Porque sim.
const MeuComponente = ({ valor }) => {
  return <div>{valor}div>;
};

Bônus: Se tiver 500 cards, melhor ainda. Cada um renderizando sem motivo = ❤️

2. Use funções inline nas props

Crie funções dentro do render. Toda vez. Porque função boa é função novinha, feita na hora.

<Button onClick={() => console.log("clicou")}>Clique aquiButton>

Quer mais? Coloque isso em uma lista com 1.000 itens:

{itens.map(item => (
  <Item key={item.id} onClick={() => handleClick(item)} />
))}

Você não vai ver diferença… até o app travar. 🤡

3. Carregue todos os dados de uma vez

Componentes com useEffect no mount carregando 10 mil registros? Perfeito. Afinal, quem precisa de paginação ou lazy loading?

useEffect(() => {
  fetchTudoDeUmaVez().then(setDados);
}, []);

Isso sim é trabalhar com foco. Se o usuário ficar esperando, que aproveite para meditar. 🧘

4. Ignore completamente useCallback e useMemo

Quem precisa de memoização? Deixe o React recriar todas as funções e cálculos a cada render. Otimização é coisa de quem tem tempo.

const resultado = dados.filter(item => item.ativo).map(transformaDados);

Toda vez. Em todo lugar.

Economizar CPU é coisa de fraco. 🧠❌

5. Componentes Fantasma (Gasparzinho)

Crie componentes que montam e desmontam sem motivo aparente. Ou melhor: renderize componentes pesados fora da viewport, só por precaução.

{mostrarCoisaPesada && <CoisaQueDemora />}

Mostra, esconde, mostra, esconde. Uma rave de renders.

Conclusão

Aplicando essas 5 dicas preciosas, seu app React vai se transformar numa verdadeira máquina... de lentidão.

Mas falando sério: já viu (ou cometeu) alguma dessas pérolas?

Conta aí nos comentários e bora espalhar esse “manual do caos” — para que ninguém mais repita. Ou repita, mas consciente. 😅

Curtiu?

Me segue por aqui pra mais dicas técnicas (e desastres em potencial) no mundo React.

Se riu ou chorou lendo isso, compartilha com aquele dev que "faz funcionar primeiro, otimiza depois".