Расскажи про паттерн поднятия состояния (lifting state up) в React

Что такое поднятие состояния?

Поднятие состояния (lifting state up) — это фундаментальный паттерн в React, который используется, когда два или более компонента должны синхронизировать свои данные. Вместо того чтобы хранить состояние в каждом компоненте отдельно, оно перемещается (поднимается) в ближайшего общего родителя. Родитель становится единственным источником правды (single source of truth) и передает данные и колбэки для изменения состояния через props.

Как это работает?

Рассмотрим пример: два компонента TemperatureInput для ввода температуры в Цельсиях и Фаренгейтах. Если каждый будет хранить свое состояние, они не смогут синхронизироваться. Решение — поднять состояние в компонент Calculator:

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <fieldset>
      <legend>{scale === 'c' ? 'Цельсий' : 'Фаренгейт'}</legend>
      <input value={temperature}
             onChange={(e) => onTemperatureChange(e.target.value)} />
    </fieldset>
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (value) => {
    setTemperature(value);
    setScale('c');
  };

  const handleFahrenheitChange = (value) => {
    setTemperature(value);
    setScale('f');
  };

  const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={handleCelsiusChange} />
      <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={handleFahrenheitChange} />
    </div>
  );
}

Здесь Calculator хранит единое состояние (temperature и scale) и передает его в оба TemperatureInput. При изменении значения в любом поле вызывается соответствующий колбэк, который обновляет состояние в родителе, и оба поля перерисовываются синхронно.

Где применяется?

Паттерн используется в любых ситуациях, где компоненты одного уровня должны обмениваться данными: формы с зависимыми полями, списки с фильтрацией, панели инструментов и т.д. Он является альтернативой глобальным стейт-менеджерам (Redux, Context) для простых случаев.

Вывод

Поднятие состояния — это простой и эффективный способ управления общими данными в React без внешних библиотек. Он делает поток данных однонаправленным и предсказуемым, что упрощает понимание и отладку приложения. Используйте его, когда несколько компонентов должны быть синхронизированы, но нет необходимости в глобальном хранилище.