Lifting state up significa mover o estado de um componente filho para um componente pai comum, para que múltiplos filhos possam compartilhar e permanecer sincronizados com os mesmos dados. É a solução padrão quando componentes irmãos precisam se coordenar.
() { [temp, setTemp] = (); ... }
Se dois componentes irmãos mantêm cada um sua própria cópia de um estado relacionado, não há maneira deles permanecerem consistentes — alterar um não afeta o outro.
function Calculator() {
const [temperature, setTemperature] = useState(0); // state LIFTED to the parent
return (
<>
{/* pass state DOWN as a prop, and a setter to update it */}
<TempInput scale="C" value={temperature} onChange={setTemperature} />
<TempInput scale="F" value={temperature} onChange={setTemperature} />
<p>Both inputs share one value: {temperature}</p>
</>
);
}
function TempInput({ value, onChange }) {
return <input value={value} onChange={e => onChange(e.target.value)} />;
}
O estado compartilhado agora vive no pai (Calculator). Ele passa o valor para baixo como uma prop e um setter para que os filhos possam solicitar mudanças (para cima). Agora ambas as entradas refletem a mesma fonte — editar uma atualiza ambas.
1. Find the closest COMMON ancestor of the components that need to share
2. Move the state UP into that ancestor
3. Pass the value DOWN as props
4. Pass a callback DOWN so children can request updates (data up via events)
Este é o mesmo fluxo "dados para baixo, eventos para cima", aplicado para compartilhar estado.
Lifting too high (state ends up far from where it's used) → prop drilling.
At that point, prefer Context or a state library instead of lifting further.
Lifting state up é a técnica fundamental para compartilhar estado entre componentes irmãos/relacionados em frameworks baseados em componentes — mantém uma única fonte de verdade em um pai comum para que os filhos permaneçam sincronizados.
É frequentemente a primeira ferramenta que você procura antes de adicionar Context ou uma store.
Reconhecer quando fazer lifting (irmãos precisam se coordenar) — e quando o lifting foi longe demais (causando prop drilling, então é hora de Context/uma store) — é fundamental para estruturar bem o estado do componente.