Lift State Up
No React, “lift state up” é uma técnica para compartilhar o estado entre componentes que não têm uma relação direta de pai e filho.
A ideia básica é mover o estado compartilhado para o componente pai mais próximo que encapsula ambos os componentes irmãos. Isso permite que o componente pai gerencie o estado e passe-o para seus filhos como props.
Claro! Vamos explorar o conceito de “lift state up” em React, começando com uma abordagem simples e depois detalhando os aspectos técnicos.
Exemplo em React
Imagine que você tem dois componentes irmãos, ComponenteA e ComponenteB, que precisam compartilhar uma informação, como uma contagem. Inicialmente, cada um pode ter seu próprio estado local:
function ComponenteA() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Contagem em A: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementar A</button>
</div>
);
}
function ComponenteB() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Contagem em B: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementar B</button>
</div>
);
}Aqui, ComponenteA e ComponenteB gerenciam sua própria contagem. Se você quiser que ambos os componentes sincronizem suas contagens, você precisa “elevar” o estado para o componente pai em comum.
Para compartilhar o estado, você move a lógica de estado para um componente pai comum:
function ComponentePai() {
const [count, setCount] = React.useState(0);
return (
<div>
<ComponenteA count={count} setCount={setCount} />
<ComponenteB count={count} setCount={setCount} />
</div>
);
}
function ComponenteA({ count, setCount }) {
return (
<div>
<p>Contagem em A: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementar A</button>
</div>
);
}
function ComponenteB({ count, setCount }) {
return (
<div>
<p>Contagem em B: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementar B</button>
</div>
);
}