В этой статье рассматривается жизненный цикл хука React useEffect:

  • устанавливать
  • Обновлять
  • Размонтировать

Предпосылки

Импорт useEffect:

import { useEffect } from 'react';

устанавливать

Компонент смонтировал:

useEffect(() => {
  console.log('mount');
}, []);

Обновлять

Компонент обновился:

useEffect(() => {
  console.log('update');
});

Компонент обновился при изменении данных:

useEffect(() => {
  console.log('update on data change');
}, [data]);

Компонент размонтируется или обновится при изменении данных:

useEffect(() => {
  return () => {
    console.log('update on data change or unmount');
  };
}, [data]);

Размонтировать

Компонент размонтируется:

useEffect(() => {
  return () => {
    console.log('unmount');
  };
}, []);

Эта статья была первоначально опубликована на сайте замечательной марки.org 22 августа 2021 г.