Справочник React

Подъём состояния: общий источник данных

Если два компонента должны показывать одни данные, состояние переносят в их ближайшего общего родителя. Дочерние компоненты получают значение и функции изменения через props.

Рабочий пример

function Temperature() {
  const [value, setValue] = useState(20);
  return <>
    <TemperatureInput value={value} onChange={setValue} />
    <TemperaturePreview value={value} />
  </>;
}

Родитель становится единственным источником истины. Дочерний компонент не хранит копию value, а вызывает onChange с новым значением.

Когда применять

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

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

Частые ошибки

• Хранить копии одного значения у детей
• Поднимать локальное состояние до корня приложения
• Передавать функцию, которая меняет несвязанные данные