Подъём состояния (lifting state up)

Решаем частую задачу: два компонента должны видеть одни и те же данные. Поднимаем состояние к общему родителю.

Подъём состояния (lifting state up) — приём, при котором общее состояние переносят в ближайшего общего родителя, а детям передают значение и функцию его изменения.

Проблема: данные нужны двоим

Представьте поле ввода температуры и индикатор «вода кипит / не кипит». Оба завязаны на одно число. Если каждый компонент хранит своё состояние, они рассинхронизируются. Решение — единый источник правды у родителя.

Шаг 1: состояние у родителя

Родитель хранит состояние и передаёт его обоим детям. Одному — для отображения, другому — функцию для изменения:

function App() {
  const [temp, setTemp] = useState(20);

  return (
    <div>
      <TempInput value={temp} onChange={setTemp} />
      <BoilingIndicator temp={temp} />
    </div>
  );
}

Шаг 2: ребёнок-источник сообщает наверх

Поле ввода не хранит состояние само — оно получает текущее значение пропсом и зовёт onChange, чтобы родитель обновил состояние:

function TempInput({ value, onChange }) {
  return (
    <input
      type="number"
      value={value}
      onChange={(e) => onChange(Number(e.target.value))}
    />
  );
}

Шаг 3: ребёнок-потребитель только читает

Индикатор просто получает temp и показывает результат:

function BoilingIndicator({ temp }) {
  return <p>{temp >= 100 ? "Вода кипит" : "Вода не кипит"}</p>;
}

Теперь оба компонента всегда согласованы: единственный источник правды — состояние родителя.

Паттерн «данные вниз, события вверх»

Это фундаментальная схема React:

Данные текут вниз — через пропсы (value={temp}).
События идут вверх — через функции-пропсы (onChange={setTemp}).

Ребёнок не меняет состояние напрямую — он просит родителя через переданную функцию. Поток остаётся однонаправленным и предсказуемым.

Где должно жить состояние

Правило выбора: найдите ближайшего общего родителя всех компонентов, которым нужны эти данные, и поместите состояние туда. Не выше (лишний проп-дриллинг), не ниже (дети не смогут поделиться).

Итог

Если состояние нужно нескольким компонентам — поднимите его в общего родителя.
Родитель передаёт вниз значение (проп) и функцию изменения (проп-обработчик).
Схема «данные вниз, события вверх» сохраняет единый источник правды и однонаправленный поток.