Por que abusar do useState pode travar sua aplicação React
Você pode estar sabotando sua aplicação ao usar o useState para tudo. Aprenda como o excesso de estados pode destruir sua performance, técnicas para re-renderizar apenas o necessário e quando migrar para outros hooks.
Por que isso é importante
O excesso de useState é um dos erros mais cometidos por quem começa (e por muito sênior apressado): cada novo dado, um novo estado. Isso parece simples, até sua interface ficar lenta, você perder controle dos fluxos e todo clique disparar uma cascata de re-renderizações. Entender como os hooks alteram seu render é fundamental para escalar projetos e evitar bugs misteriosos.
UseState não é solução para tudo
Toda vez que usamos useState, acionamos o motor do React para reprocessar o componente. Às vezes, um simples valor muda e toda a árvore de interface refaz seu trabalho. O vício de colocar tudo no state é tentador: facilita, parece seguro. Mas quando tudo vira state, nada é otimizado, e cada ação pequena pode virar um tsunami de renders.
Re-renderização pode virar seu pesadelo
Cada alteração no estado dispara um novo ciclo de render. Em listas, animações ou grandes formulários, isso compromete desempenho, causa travadas e até bugs difíceis de rastrear. É aí que o React “re-render na sua cara” sem dó.
⚠️Atenção
Toda vez que um state muda, todos os filhos daquele componente também podem re-renderizar, mesmo que não dependam daquele valor.
Quando vale criar um state?
Crie estados apenas para valores que realmente mudam durante a vida do componente e impactam a interface. Estado não é cache, não é variável “globalzinha”, não é contador de pixel. Pergunte: minha UI realmente precisa saber dessa mudança agora?
ℹ️Info extra
Se o dado não for necessário para rederivar elementos visuais, deixe fora do state. Use variáveis simples ou referências.
Conheça alternativas poderosas
useReducer, useRef, contextos bem estruturados e memoização podem eliminar estados desnecessários. Entenda suas ferramentas – useReducer resolve lógicas complexas sem explodir a árvore de renders; useRef permite guardar valores sem re-render; context aciona globalmente, mas com parcimônia.
Exemplos práticos: antes e depois
Abordagem tradicional e otimizando
Imagine um chat que cada mensagem nova dispara useState e renderiza tudo, até o header. Agora, migrando para useReducer e memo, apenas as mensagens e lista mudam. O resultado: app leve, sem flickers.
Perigos escondidos (e comuns)
Estados isolados criam bugs silenciosos. Dados fora de sincronia, efeitos colaterais inesperados, problemas com atualização assíncrona ou vazamentos de memória. Menos é mais: trate o state como ouro.
❌Erro clássico
Trocar estados “paralelos” (como dois related states) gera inconsistências: valores ficam fora de sincronia se não forem atualizados juntos corretamente.
Como identificar uso abusivo de useState
Se a página está lenta ou fazer scroll trava tudo ao mudar qualquer coisa, revise: muitos states, muitos renders. Ferramentas como React DevTools mostram quantas vezes cada componente está atualizando.
Padrão para múltiplos estados
Prefira useReducer para muitos estados interligados. Isso deixa seu fluxo previsível e fácil de debugar. useState só para poucas variáveis e fluxos simples.
Quando usar useRef sem medo
useRef armazena valores mutáveis sem re-render. Útil para timers, valores temporários, referências DOM e contadores internos.
Boas práticas: menos usoState, mais clareza
Centralize lógicas em hooks customizados, evite prop drilling e prefira dados fluindo por contextos ou props diretas apenas onde for preciso.
UI mais rápida: o segredo dos experts
Memorização (React.memo, useMemo) bloqueia re-renders inúteis. Componentes puros e organizados permitem updates mínimos e deixam o app leve, mesmo com muitos dados.
✅Dica prática
Analise sua árvore de componentes. Pergunte: quem realmente precisa saber daquela mudança? Menos dependências, menos rerender.
Sinais de que sua arquitetura precisa melhorar
Se sua solução parece uma bola de neve de states e tudo depende de tudo, é hora de enxugar, separar responsabilidades e adotar hooks mais inteligentes.
Resumo: não use useState para tudo
O uso inconsequente do useState pode re-renderizar até seu humor. Reflita a cada novo estado: é vital, necessário, impacta o render? Mais controle, menos problema.
Assista: a verdade no canal Dev Doido
Quer ver códigos reais, benchmarks e aplicações travando ao vivo? Confira o canal Dev Doido e aprofunde seus conhecimentos com centenas de dicas, sacadas e debates técnicos: youtube.com/@DevDoido