React Tricks Miniseries 6: Как правильно использовать useEffect

Хук useEffect в react, вероятно, является самым сложным хуком для правильного написания и понимания.

Не углубляясь в семантику работы useEffect, я предложу краткое объяснение, достаточное для того, чтобы показать, как правильно его использовать.

useEffect — это функция react, которая выполняет код внутри нее асинхронно. Но по умолчанию она не является асинхронной. По умолчанию она запускает ваш код, когда компонент монтируется, и запускает его только один раз. Массив зависимостей, который вы видите в конце, говорит: «Какую бы переменную (переменные) вы ни поместили внутрь, я буду выполнять весь код внутри меня снова, каждый раз, когда эта переменная (переменные) меняет значение». Именно здесь он становится асинхронным, только когда вы помещаете переменную в массив зависимостей.

useEffect(() => {
  //get posts info from database
  //get posts info again everytime a new comment is added/edited
},[comments]) 
Вход в полноэкранный режим Выход из полноэкранного режима

Поместив переменную comments (которая может содержать массив комментариев постов) в массив зависимостей, мы говорим react, что хотим получать данные о постах каждый раз, когда комментарий добавляется или редактируется.

Теперь есть две концепции, которые многие разработчики упускают или не знают.

Очистка

Функции очистки предназначены для отписки от UseEffect. То есть, когда компонент отсоединяется от виртуального домена, мы хотим прекратить получение данных о постах. Если ничего с этим не делать, react столкнется с ошибками и предупредит вас в консоли об отмене подписки на useEffect. Чтобы решить эту проблему, мы можем использовать простую функцию очистки.

Здесь мы можем использовать один замечательный трюк. Вместо того чтобы выяснять, что нужно вернуть, чтобы остановить подписку, мы можем просто вернуть наш исходный код в useEffect, и он будет автоматически уничтожаться каждый раз, когда компонент размонтируется.

useEffect(() => 
  //get posts info from database
,[comments]) 
Вход в полноэкранный режим Выход из полноэкранного режима

Обратите внимание, как, удалив фигурные скобки и вернув исходный код, react отменит подписку на всех слушателей внутри useEffect. Нет необходимости в возвратах. Наш код стал чище и короче.

Заключение

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

Вы знали этот трюк или узнали его только сейчас? Дайте мне знать в комментариях!

Оцените статью
Procodings.ru
Добавить комментарий