Quando usar estado global ou local
Aplique o princípio da co-localização: mantenha o estado o mais próximo possível de quem o consome e eleve-o apenas quando vários componentes não relacionados precisarem dele.
Quando usar estado global ou local é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
A questão de onde colocar o estado
Cada parte do estado tem um local ideal. Escolher o local errado resulta em dificuldades com a perfuração de propriedades ou em uma complexidade desnecessária do estado global. O princípio orientador é: mantenha o estado o mais próximo possível de seus consumidores.
Estado local do componente
Se apenas um componente usa o estado, ele pertence ao useState/ref desse componente. Não é necessário compartilhá-lo — mantenha-o local. Esse é o caso mais simples e comum.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Elevação do estado
Quando dois componentes irmãos precisam do mesmo estado, eleve-o até o ancestral comum mais próximo. Passe-o como propriedades e funções de retorno. Essa é a abordagem padrão de React/Vue antes de recorrer a um repositório global.
Contexto compartilhado — compartilhamento intermediário
Quando o estado precisa ser compartilhado em uma subárvore sem perfuração de propriedades, o Contexto (React) ou provide/inject (Vue) é a ferramenta adequada. Isso serve para compartilhamento de escopo moderado (uma página, um módulo de funcionalidade).
Repositório global — estado de toda a aplicação
Use um repositório global (Redux, Zustand, Pinia) para estados que: 1) são acessados por muitos componentes não relacionados, 2) precisam sobreviver à navegação, 3) têm lógica de atualização complexa, 4) se beneficiam da inspeção pelo DevTools.
Exemplos: estado local
O estado local é adequado para: valores de campos de formulário, dica de ferramenta aberta/fechada, visibilidade de janela modal, estado de passagem do cursor, estado de animação e indicadores de carregamento locais a um único componente.
Exemplos: estado elevado
O estado elevado é adequado para: um filtro compartilhado usado por duas listas irmãs, a aba selecionada em um grupo de abas e dados de formulário compartilhados entre duas etapas.
Exemplos: contexto/provide
O contexto é adequado para: tema atual, usuário autenticado, localidade/idioma, sinalizadores de funcionalidade e pilha de notificações — elementos consumidos em muitos níveis, mas atualizados com pouca frequência.
Exemplos: repositório global
O repositório global é adequado para: carrinho de compras, tokens de autenticação + objeto do usuário, fila de notificações (as mensagens aparecem em uma notificação de qualquer lugar) e dados em tempo real exibidos simultaneamente por várias telas.
Estado do servidor vs. estado do cliente
Dados de rede (obtidos de uma API) pertencem a uma categoria especial: o estado do servidor. Eles precisam de tratamento de carregamento/erro, armazenamento em cache e invalidação. React Query / SWR / TanStack Query gerenciam o estado do servidor para que seu repositório possa se concentrar no verdadeiro estado do cliente.
Erro comum: tudo no repositório global
Não coloque todo o estado no repositório global apenas por precaução. O estado local é mais barato, simples e fácil de testar. O uso excessivo do estado global cria acoplamento entre componentes que deveriam ser independentes.
Estrutura de decisão
Pergunte: 1) Outros componentes precisam disso? Não → local. 2) Componentes irmãos próximos precisam disso? Sim → eleve o estado. 3) Uma subárvore de componentes precisa disso? Sim → contexto/provide. 4) Muitos componentes não relacionados precisam disso, ou isso precisa do DevTools? Sim → repositório global.
Verificação rápida
Onde você deve armazenar o estado aberto/fechado de um único componente de acordeão?
Recapitulação: localização do estado
Princípio: mantenha o estado o mais próximo possível dos consumidores. useState/ref local para o estado de um único componente. Elevação do estado para compartilhamento entre irmãos. Contexto/provide para compartilhamento em uma subárvore. Repositório global para estados de toda a aplicação com atualizações complexas. O estado do servidor (dados da API) pertence ao React Query/SWR, não ao repositório global.
Perguntas Frequentes
A aula “Quando usar estado global ou local” é grátis?
Sim — o texto completo de “Quando usar estado global ou local” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Quando usar estado global ou local”?
Aplique o princípio da co-localização: mantenha o estado o mais próximo possível de quem o consome e eleve-o apenas quando vários componentes não relacionados precisarem dele. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Quando usar estado global ou local”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Redux Toolkit: createSlice e configureStore
- Zustand para estado leve no React
- Pinia para Vue: defineStore e storeToRefs
- Quando usar estado global ou local