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 aqui</Button>
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".
Top comments (0)