Подъем состояний в React

Часто несколько компонентов должны отражать одни и те же изменяющиеся данные. В React рекомендовано поднимать общее состояние до ближайшего общего предка. Давайте посмотрим на примере.

Пусть мы хотим сделать калькулятор температуры воды. Он будет представлять собой инпут, в который пользователь будет вводить температуру, и абзац, в который будет выводится вердикт: вода жидкая, вода твердая, вода газообразная.

Пусть наш калькулятор представляет собой компонент-контейнер Calculator:

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

Вынесем инпут для ввода температуры в компонент TempInp, а абзац с вердиктом - в компонент Verdict:

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

Легко понять, что и TempInp, и Verdict должны иметь стейт с температурой. При этом логично, что это должна быть одна и та же температура: по мере ввода данных в инпут должен отображаться вердикт.

В таком случае рекомендовано использовать прием, называемый подъем состояния: состояние, общее для двух (и более) компонентов поднимается вверх до их общего родителя.

В нашем случае получится, что стейт с температурой должен принадлежать компоненту Calculator, который будет передавать его в TempInp и Verdict в качестве пропсов:

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

В компоненте TempInp должен быть инпут для изменения температуры. Но, так как эта температура является пропсом данного компонента, то непосредственно в TempInp изменять его нельзя. Правильно будет передать из компонента Calculator специальную функцию для изменения температуры:

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>;
}

Можно, кстати, не вводить новую функцию, а передать в дочерний компонент функцию setTemp:

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