Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить componentDidUpdate()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> `componentDidUpdate(prevProps, prevState, snapshot)`
> - викликається **після оновлення компонента** (тобто після `render()` і після того, як зміни вже застосовані в DOM).

---

## Коли викликається

Метод викликається **на кожній перемальовці (re-render)**, крім першої (монтування):

1. Компонент отримав нові `props` або змінився `state`.
2. React викликає `render()`.
3. React оновлює DOM.
4. **React викликає** `componentDidUpdate()`.

---

## Сигнатура методу

```javascript
componentDidUpdate(prevProps, prevState, snapshot) {
  // твій код
}
```

| Параметр | Значення |
|---|---|
| `prevProps` | Попередні пропси |
| `prevState` | Попередній стан |
| `snapshot` | Результат `getSnapshotBeforeUpdate()` (якщо він є) |

---

## Приклад

```javascript
class Example extends React.Component {
  state = { count: 0 };

componentDidUpdate(prevProps, prevState) {
    // Перевіряємо, чи змінився count
    if (prevState.count !== this.state.count) {
      console.log('count змінився:', this.state.count);
      document.title = `Лічильник: ${this.state.count}`;
    }
  }

render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}
```

**Як це працює:**

- При першому рендері `componentDidUpdate` **не викликається**.
- При кожному `setState` → після оновлення DOM викликається `componentDidUpdate`.
- Ми порівнюємо `prevState` і `this.state`, щоб не виконувати ефект даремно.

---

## Важливі правила

1. **Не викликай** `setState` **без умови всередині** `componentDidUpdate()`**!**
Інакше буде нескінченний цикл:

```javascript
  componentDidUpdate() {
    this.setState({ count: 1 }); // викликає оновлення знову і знову
  }
  ```
Роби лише за перевірки:

```javascript
  if (prevState.count !== this.state.count) {
    this.setState({ doubled: this.state.count * 2 });
  }
  ```
2. **Викликається після commit phase** - тобто коли DOM вже оновлений.
Тому ти можеш:
  - Вимірювати розміри елементів.
  - Працювати з DOM API.
  - Робити мережеві запити на основі нових даних.
  - Запускати анімації.
3. **Аналог у функціональних компонентах** - `useEffect()`

```javascript
  useEffect(() => {
    console.log('аналог componentDidUpdate');
  });
  ```
Якщо ти хочеш, щоб ефект виконувався **лише при зміні конкретного значення**, додай залежності:

```javascript
  useEffect(() => {
    console.log('count змінився');
  }, [count]);
  ```

---

## Типові сценарії використання

| Задача | Приклад |
|---|---|
| Реакція на зміну props/state | Перезапустити таймер при зміні пропсів |
| Синхронізація із зовнішніми API | Оновити дані на сервері при зміні стану |
| Вимірювання DOM | Отримати розміри елемента після оновлення |
| Анімація | Запустити анімацію після зміни даних |

---

## Порівняння з іншими методами

| Метод | Коли викликається | Основне призначення |
|---|---|---|
| `componentDidMount()` | Після першого рендеру | Ініціалізація, запити |
| `componentDidUpdate()` | Після кожного оновлення | Реакція на зміни |
| `componentWillUnmount()` | Перед видаленням з DOM | Очищення ресурсів |

---

## Підсумок

> `componentDidUpdate()` - це момент, коли **DOM вже оновлений**, і ти можеш безпечно виконувати будь-які **побічні дії**, що реагують на зміни `props` чи `state`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати436 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.