Elevação de Estado no React

Frequentemente, vários componentes precisam refletir os mesmos dados em mudança. No React, é recomendado elevar o estado compartilhado para o ancestral comum mais próximo. Vamos ver um exemplo.

Suponha que queremos fazer uma calculadora de temperatura da água. Ela será composta por um input, no qual o usuário irá inserir a temperatura, e um parágrafo, no qual será exibido o veredito: água líquida, água sólida, água gasosa.

Suponha que nossa calculadora seja um componente contêiner Calculator:

jsxfunction Calculator() {
  return <div>
    
  </div>;
}

Vamos extrair o input para inserir a temperatura para o componente TempInp, e o parágrafo com o veredito - para o componente Verdict:

jsxfunction Calculator() {
  return <div>
    <Verdict />
    <TempInp />
  </div>;
}

É fácil entender que tanto TempInp quanto Verdict devem ter um estado com a temperatura. Ao mesmo tempo, é lógico que esta deve ser a mesma temperatura: à medida que os dados são inseridos no input, o veredito deve ser exibido.

Nesse caso, é recomendado usar uma técnica chamada elevação de estado: o estado, compartilhado por dois (ou mais) componentes, é elevado para cima, até seu ancestral comum.

No nosso caso, resultará que o estado com a temperatura deve pertencer ao componente Calculator, que o passará para TempInp e Verdict como props:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} />
  </div>;
}

No componente TempInp deve haver um input para alterar a temperatura. Mas, como essa temperatura é uma prop deste componente, não é possível alterá-la diretamente em TempInp. O correto será passar do componente Calculator uma função específica para alterar a temperatura:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  function changeTemp(event) {
    setTemp(event.target.value);
  }
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} changeTemp={changeTemp} />
  </div>;
}

Pode-se, aliás, não criar uma nova função, e passar para o componente filho a função setTemp:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} setTemp={setTemp} />
  </div>;
}