Підняття стану в React

Що таке підняття стану?

Підняття стану — це шаблон, в якому ви переміщуєте спільний стан з дочірніх компонентів до їх найближчого спільного батька. Коли кілька компонентів потребують однакових даних, ви "піднімаєте" стан до батька і передаєте його вниз через props.

Проблема

tsx

// ❌ Два сусідніх компоненти не можуть безпосередньо ділитися станом
function TemperatureCelsius() {
  const [temp, setTemp] = useState(0);
  return <input value={temp} onChange={e => setTemp(+e.target.value)} />;
}

function TemperatureFahrenheit() {
  const [temp, setTemp] = useState(32);
  return <input value={temp} onChange={e => setTemp(+e.target.value)} />;
}

// Ці два компоненти НЕ синхронізовані

Рішення: Підняти стан

tsx

// ✅ Батько утримує спільний стан
function TemperatureConverter() {
  const [celsius, setCelsius] = useState(0);

  const handleCelsiusChange = (value: number) => setCelsius(value);
  const handleFahrenheitChange = (value: number) => setCelsius((value - 32) * 5 / 9);

  return (
    <div>
      <TemperatureInput
        label="Celsius"
        value={celsius}
        onChange={handleCelsiusChange}
      />
      <TemperatureInput
        label="Fahrenheit"
        value={celsius * 9 / 5 + 32}
        onChange={handleFahrenheitChange}
      />
    </div>
  );
}

function TemperatureInput({ label, value, onChange }: {
  label: string;
  value: number;
  onChange: (value: number) => void;
}) {
  return (
    <label>
      {label}:
      <input
        type="number"
        value={value}
        onChange={e => onChange(+e.target.value)}
      />
    </label>
  );
}

Коли піднімати стан

Два або більше компонентів потребують однакових даних
Батько потребує координації дочірніх компонентів
Вам потрібен єдиний джерело правди для спільних даних

Коли НЕ піднімати стан

Стан використовується лише одним компонентом (залиште його локальним)
Глибоко вкладені компоненти викликають пробивання props → використовуйте Context або управління станом
Стан змінюється дуже часто → підняття занадто високо викликає непотрібні повторні рендери

Покроковий процес

Визначте спільний стан у дочірніх компонентах
Знайдіть їх найближчого спільного предка
Перемістіть стан до батьківського компонента
Передайте значення стану як props дочірнім компонентам
Передайте функції-сеттери як колбеки дочірнім компонентам

Альтернативи для глибоких ієрархій

Підхід	Коли використовувати
Підняття стану	1-2 рівні вкладення
Context API	Багато рівнів, рідкісні оновлення
Управління станом (Zustand, Redux)	Складний спільний стан між багатьма компонентами
Композиція (props дітей)	Уникнення пробивання props

Важливо:

Підняття стану забезпечує єдине джерело правди — лише один компонент володіє даними, а інші отримують їх через props. Це основний шаблон React для спільного використання стану між сусідніми компонентами. Для глибоких дерев розгляньте Context або зовнішні менеджери стану.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Підняття стану в React

#Що таке підняття стану?

#Проблема

#Рішення: Підняти стан

#Коли піднімати стан

#Коли НЕ піднімати стан

#Покроковий процес

#Альтернативи для глибоких ієрархій