У чому полягає принцип «підйому стану»?

Повне пояснення

Що це і навіщо Підйом стану (state lifting) – патерн, коли shared state переміщується в найнижчий спільний батьківський компонент. Це забезпечує одне джерело правди, зменшує дублювання і полегшує синхронізацію UI.

Ключові принципи

• State живе в одному місці (батьковий компонент).
• Дочірні компоненти отримують state через пропси.
• Оновлення стану здійснюється за допомогою колбеків, що передаються як пропси.

Як це працює

1. Дочірній компонент генерує подію (наприклад, зміна вводу).
2. Подія викликає колбек, переданий з батька.
3. Батько оновлює state і повторно рендерить себе та дочірні компоненти.

Практика і реалізація (React)

function Parent() {
  const [value, setValue] = useState('');
  return <Child value={value} onChange={setValue} />;
}
function Child({ value, onChange }: {value:string; onChange:(v:string)=>void}) {
  return <input value={value} onChange={e=>onChange(e.target.value)} />;
}

Тестування

• Unit: перевірити, що колбек оновлює state.
• Integration: рендер дочірнього компонента з mock‑state і перевірка синхронізації.

Особливості в контексті React

• Підйом стану часто використовується перед Context API або Redux, коли state не надто великий.
• У Next.js 14/15 підйом може бути комбінований з server components для оптимізації.

Оптимізація та типові помилки

• Перевантаження пропсів: обмежуйте кількість колбеків.
• Не змінюйте state безпосередньо – використовуйте setter.
• Уникайте «проп‑драт» (prop drilling) через Context або state management бібліотеки.

Диагностика

• Якщо дочірній компонент не оновлюється: перевірте, чи передається колбек і чи викликається він.
• Якщо state не синхронізується: переконайтеся, що батьковий компонент рендериться після оновлення.

Альтернативи

• Context API – коли state потрібен багатьом глибоко вкладеним компонентам.
• Redux/Zustand – для великих додатків з багатьма джерелами стану.

Часті помилки (8)

1. Змінювати state без setter.
2. Передавати функцію, що створюється в кожному рендері (причина непотрібних перерендерів).
3. Не використовувати memoization для дочірніх компонентів.
4. Перевантаження пропсів великими об’єктами.
5. Відсутність ключа у списках.
6. Необхідність обробки асинхронних оновлень.
7. Втрата контексту this у колбеках.
8. Необхідність обробки race conditions при паралельних оновленнях.

Cheatsheet

• useState → state + setter.
• props.value, props.onChange → передача даних і колбеків.
• React.memo → запобігання зайвим рендером.

Follow‑up питання

• Як уникнути проп‑драт у глибоких деревах компонентів?
• Коли варто перейти від підйому стану до Context API?