0Pricing
React Academy · Aula

Elevação do estado: princípios e exemplos

Mova o estado compartilhado para o ancestral comum mais próximo e passe-o por meio de props.

Elevação do estado: princípios e exemplos é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 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á o padrão de elevar o estado — mover o estado compartilhado para o ancestral comum mais próximo, para que os componentes irmãos permaneçam sincronizados.

O problema: irmãos fora de sincronia

Quando dois componentes irmãos precisam dos mesmos dados, manter um estado separado em cada um causa erros de sincronização. A solução é mover o estado para o pai comum.

Identificando o ancestral comum

Encontre o componente mais próximo que seja pai de **ambos** os componentes que precisam dos dados compartilhados. Mova o estado para esse componente e passe-o como propriedades.
function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Exemplo de elevação de um contador

Suponha que dois componentes exibam o mesmo contador. Em vez de gerenciar a contagem em cada um, eleve-a para o pai. Ambos recebem a contagem como propriedade e chamam uma função de retorno onChange para atualizá-la.
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Propriedades de função de retorno para atualizações

Os filhos não podem modificar diretamente o estado do pai. O pai passa uma função de retorno (como `onChange`) como propriedade. Os filhos chamam essa função quando querem solicitar uma alteração de estado.

Controlado e não controlado após a elevação

Após a elevação, o filho que antes era proprietário do estado se torna um **componente controlado** — ele recebe o valor atual e onChange do pai. O pai é a única fonte de verdade.

Elevação em vários níveis

Às vezes, é necessário elevar o estado vários níveis na árvore. Se o estado precisar passar por muitos componentes intermediários, considere usar Contexto para evitar o encadeamento de propriedades.

Benefícios de elevar o estado

Elevar o estado oferece uma única fonte de verdade, torna o fluxo de dados previsível (sempre de cima para baixo), simplifica a depuração e facilita adicionar mais consumidores do mesmo estado posteriormente.

Estado derivado do estado elevado

Calcule os valores derivados do estado elevado dentro do pai e passe-os como propriedades adicionais. Nunca duplique o estado — derive-o.
const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Quando elevar o estado se torna excessivo

Se você perceber que está elevando o estado por 4 ou mais níveis, a estrutura da árvore de componentes pode estar incorreta ou pode ser hora de usar Contexto ou uma biblioteca de gerenciamento de estado.

Verificação rápida

Qual é a abordagem correta quando dois componentes irmãos precisam compartilhar o mesmo estado?

Recapitulação

Eleve o estado para o ancestral comum mais próximo quando os irmãos precisarem compartilhá-lo. Passe o valor atual para baixo e as funções de retorno de alteração para cima. Derive os valores em vez de duplicar o estado.

Próxima etapa

Próxima lição: **Passagem de Propriedades: Quando Prejudica e Quando É Adequada** — você identificará cadeias problemáticas de passagem de propriedades e decidirá quando elas precisam de uma solução.

Perguntas Frequentes

A aula “Elevação do estado: princípios e exemplos” é grátis?

Sim — o texto completo de “Elevação do estado: princípios e exemplos” é 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 “Elevação do estado: princípios e exemplos”?

Mova o estado compartilhado para o ancestral comum mais próximo e passe-o por meio de props. 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 1 de 4.

Quanto tempo leva a aula “Elevação do estado: princípios e exemplos”?

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

  1. Elevação do estado: princípios e exemplos
  2. Prop drilling: quando prejudica e quando é aceitável
  3. Padrões de comunicação entre irmãos
  4. Escolha do local adequado para o estado
← Voltar para React Academy