Padrão

Lifting State Up

Mover estado para o ancestral comum quando dois componentes precisam compartilhar.

Definição

Lifting State Up é o padrão de mover state para o componente ancestral mais próximo que ambos os componentes que precisam dele compartilham. Os filhos recebem state via props e callbacks para alterá-lo. É o padrão fundamental de gerenciamento de estado no React.

Problema → Solução

Problema

Dois componentes irmãos precisam compartilhar/sincronizar estado. Componente A tem state local, B precisa do mesmo valor.

Solução

Mover o state para o pai comum. Pai passa para A e B via props. Para alterar, pai passa callbacks (setX) que filhos invocam.

Dica de entrevista

Tip

Quando o lifting sobe muitos níveis (>3), considere Context, Zustand ou outra solução de state management. Lifting é elegante mas tem limites.

Código

// Pai mantém estado, filhos compartilham via props
function Form() {
  const [shared, setShared] = useState('');

  return (
    <>
      <Input value={shared} onChange={setShared} />
      <Preview value={shared} />
    </>
  );
}

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

function Preview({ value }) {
  return <p>Preview: {value}</p>;
}

Perguntas de entrevista

Q.Lifting state vs Context API?▾

A.Lifting: ideal para 2-3 níveis. Mais explícito, melhor para refactor. Context: bom para muitos níveis ou quando muitos componentes consomem. Trade-off: explicitness vs convenience.

Q.Quando NÃO usar lifting?▾

A.Quando o state sobe demais (5+ níveis) e polui componentes que não usam. Quando muitos componentes em locais distantes precisam acessar — Context, Zustand ou Redux são melhores.

Q.Como combinar lifting com performance?▾

A.Memoize callbacks com useCallback ao passar para filhos memoizados. Considere splitting de state — partes que mudam frequentemente vs partes estáveis em diferentes lugares.

Termos relacionados

33/122← →