React Academy · Aula

Escolha do local adequado para o estado

Aplique uma estrutura de decisão: estado local, elevado ou global.

Escolha do local adequado para o estado é uma aula grátis de React 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você aprenderá uma estrutura prática de decisão para determinar se o estado deve pertencer a um único componente, a um ancestral comum, ao Contexto do React ou a uma biblioteca global de estado.

Etapa 1: Quem usa este estado?

Primeiro, pergunte: quais componentes são renderizados usando este estado? Liste-os. Se apenas um componente o utilizar, mantenha o estado local nesse componente.

Estado local

O estado usado por exatamente um componente fica nesse componente com useState. Exemplos: saber se uma lista suspensa está aberta, o valor atual de um campo controlado e saber se uma dica de ferramenta está visível.

function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Etapa 2: Encontre o ancestral comum

Se vários componentes precisarem do estado, encontre o ancestral comum mais próximo deles na árvore de componentes. Mova o estado para esse local e passe-o por meio de propriedades.

Estado elevado (2–3 níveis)

O estado compartilhado por 2–3 componentes no mesmo nível de aninhamento é um bom candidato a ser elevado. O pai em comum é o proprietário e o transmite por meio das propriedades.

Etapa 3: A passagem de propriedades é profunda demais?

Se o ancestral comum estiver 4 ou mais níveis acima dos consumidores, passar propriedades por componentes intermediários cria ruído. Considere o Contexto.

Estado no Contexto

Use o Contexto para preocupações transversais de que muitos componentes em diferentes partes da árvore precisam: o usuário autenticado atual, o tema ativo e a localidade selecionada. Esses dados raramente mudam e têm muitos consumidores.

Etapa 4: O estado é complexo ou compartilhado entre páginas?

Se o estado tiver uma lógica de atualização complexa, precisar desfazer e refazer ações, precisar persistir durante a navegação ou for acessado em árvores de componentes completamente separadas, use uma biblioteca de estado dedicada (Zustand, Redux).

O estado do servidor é diferente

Os dados obtidos de um servidor são *estado do servidor*, não estado da interface. Não os armazene em useState nem em um armazenamento global — use React Query, SWR ou RTK Query, que lidam automaticamente com armazenamento em cache, novas buscas e estados de erro.

O fluxograma de decisão

1 consumidor → useState local. 2–3 consumidores em profundidade semelhante → eleve para o pai. 4 ou mais níveis de passagem → Contexto. Lógica complexa ou entre árvores → Zustand/Redux. Dados do servidor → React Query/SWR.

Verificação rápida

Qual local de estado é mais apropriado para o usuário autenticado atual, ao qual muitos componentes de um aplicativo grande precisam ter acesso?

Recapitulação

Associe o local do estado aos consumidores: local para um, elevado para poucos consumidores próximos, Contexto para muitos em diferentes níveis, biblioteca de estado para cenários complexos ou entre árvores e React Query para dados do servidor.

Curso concluído

Parabéns! Você concluiu **Elevando o Estado e Soluções para a Passagem de Propriedades**. Agora você tem uma estrutura clara para decidir onde o estado deve ficar e como compartilhá-lo corretamente.

Perguntas Frequentes

A aula “Escolha do local adequado para o estado” é grátis?

Sim — o texto completo de “Escolha do local adequado para o estado” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Escolha do local adequado para o estado”?

Aplique uma estrutura de decisão: estado local, elevado ou global. Você pratica React 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 React Academy?

Nenhuma experiência prévia é necessária. React 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 “Escolha do local adequado para o estado”?

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 React Academy?

Sim. Cada aula de React 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

Elevação do estado: princípios e exemplos
Prop drilling: quando prejudica e quando é aceitável
Padrões de comunicação entre irmãos
Escolha do local adequado para o estado

← Voltar para React Academy