Elevar o estado (lifting state up)

Compartilhar estado entre irmãos

Às vezes dois componentes irmãos precisam compartilhar o mesmo dado: por exemplo, dois campos que devem permanecer sincronizados, ou uma lista e um total que depende dela. Onde vive esse estado?

A técnica se chama "lifting state up" (elevar o estado): coloca-se o estado no ancestral comum mais próximo e passa-se para os filhos o que eles precisarem.

function Pai() {
  const [texto, setTexto] = useState("");

  return (
    <div>
      <Entrada valor={texto} aoMudar={setTexto} />
      <Eco texto={texto} />
    </div>
  );
}

function Entrada({ valor, aoMudar }) {
  return <input value={valor} onChange={(e) => aoMudar(e.target.value)} />;
}

function Eco({ texto }) {
  return <p>Você digitou: {texto}</p>;
}

As duas ideias-chave:

• O estado vive no topo, no ancestral comum (Pai).
• Aos filhos são passados dados (valor, texto) e callbacks (aoMudar) por props. O filho não guarda o estado: ele o lê e avisa o pai quando algo deve mudar.

Assim o pai é a única fonte da verdade, e todos os filhos que dependem do dado se mantêm coerentes. Quando a árvore cresce e passar callbacks por muitos níveis se torna incômodo, esse é o sinal para combiná-lo com Context (e até com useReducer) e centralizar tanto o estado quanto sua lógica.