После поста введения хука и поста хука состояния пришло время покрыть хук эффекта. Причина, по которой он называется useEffect, заключается в том, что он позволяет выполнять побочные эффекты после монтирования компонентов. Это может быть загрузка данных с сервера, добавление пользовательского прослушивателя окна или что-то еще, что вы могли бы сделать на этом этапе.

Основное использование

Самое простое использование — запускать его каждый раз при рендеринге компонента. Возможно, вам нужен прослушиватель событий для элемента, который каждый раз воссоздается заново. Если вы хотите запускать его после каждого рендеринга компонента, вы можете использовать ловушку эффекта и передавать функцию только в качестве параметра.

Компонент перерисовывается каждый раз, когда его состояние или свойства меняются. Это означает, что в приведенном выше примере при каждом изменении значения счетчика также выполняется useEffect.

Очистка

Еще одна вещь, которую вы можете сделать в хуке эффектов, — подписаться на API. Но это действие, которое вы бы отменили, когда оно больше не нужно. Если хук срабатывает каждый раз, вам не нужно запускать несколько подписок. Вот почему функция, которую вы даете хуку, может возвращать функцию. Если вы сделаете это, эта новая возвращаемая функция будет выполняться, когда компонент будет размонтирован. Вы можете использовать его как задачу очистки — что-то вроде отказа от подписки на API или удаления прослушивателя событий.

Хочу еще раз отметить. Возвращаемое значение должно быть функцией. Я вижу, как многие разработчики пытаются вернуть результат выполняемой функции вместо того, чтобы обернуть его в функцию.

Условное выполнение

Как было сказано ранее, каждый раз, когда компонент выполняет рендеринг, запускается хук эффекта. Но что, если вы не хотите, чтобы он работал? Возможно, у вас есть две переменные состояния, и вы хотите запускать задачу только при изменении одной из них. Хук эффекта также принимает второй параметр, массив всех объектов. Если вы это сделаете, хук запустится при первом рендеринге компонента и будет запускаться повторно каждый раз, когда обновляется любой элемент массива.

В приведенном выше примере есть два счетчика, каждый из которых связан со своим значением состояния. Поскольку обработчик эффекта имеет только первое значение счетчика в списке, он запускается только при изменении первого счетчика. Эта функция помогает, если у нас разные задачи для каждого обновления. Предположим, вам нужно выполнить другую задачу для второго счетчика. Вы можете добавить еще один хук эффекта, реагирующий только на его изменение.

Выполнить один раз

Бывают ситуации, когда вы можете захотеть запустить хук эффекта только один раз. Сделайте несколько запросов, транслируйте событие или что-нибудь еще. Для этого можно использовать частный случай условной формы. Если вы передаете только пустой массив, хук запускает первый рендеринг компонента. Но так как внутри нет никаких элементов, он не запустится снова.

Вы можете найти код из этого поста в моем репозитории GitHub.

Чтобы узнать больше, вы можете подписаться на меня в Twitter, LinkedIn или GitHub.