Що робить componentDidUpdate()?

ReactJunior~1 хв читання

Визначення

componentDidUpdate(prevProps, prevState, snapshot)

викликається після оновлення компонента (тобто після render() і після того, як зміни вже застосовані в DOM).

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

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

Компонент отримав нові props або змінився state.
React викликає render().
React оновлює DOM.
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, щоб не виконувати ефект даремно.

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

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

javascript

componentDidUpdate() {
  this.setState({ count: 1 }); // викликає оновлення знову і знову
}

Роби лише за перевірки:

javascript

if (prevState.count !== this.state.count) {
  this.setState({ doubled: this.state.count * 2 });
}

Викликається після commit phase - тобто коли DOM вже оновлений. Тому ти можеш:

Вимірювати розміри елементів.
Працювати з DOM API.
Робити мережеві запити на основі нових даних.
Запускати анімації.

Аналог у функціональних компонентах - useEffect()

javascript

useEffect(() => {
  console.log('аналог componentDidUpdate');
});

Якщо ти хочеш, щоб ефект виконувався лише при зміні конкретного значення, додай залежності:

javascript

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

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

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

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

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

Підсумок

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

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

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

Premium

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