Побочные эффекты — объясняются примерами.

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

Когда я изучал функционал этого хука, я не мог понять зачем использовать return в этой функции, так как в большинстве случаев его использовать не обязательно и React отлично работает без него.

По мере того, как я лучше знакомился с тем, как работает React, и с жизненным циклом компонентов, я начал замечать, что во многих случаях слишком важно использовать return в хуке useEffect, особенно в побочных эффектах.

Какие побочные эффекты?

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

useEffecthook в React позволяет функциональным компонентам выполнять определенные действия при монтировании компонента или при изменении некоторых свойств или состояний. Этот хук также позволяет выполнять очистку, когда компонент размонтирован.

Зачем устранять побочные эффекты?

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

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

Это вызывает предупреждение React, подобное этому:

Утечки памяти в приложениях React в основном являются результатом того, что подписки не были отменены, когда компонент был смонтирован до его размонтирования.

Они вызывают множество проблем, в том числе:

  • Влияет на производительность проекта за счет уменьшения объема доступной памяти.
  • Замедление работы приложения.
  • Система дает сбой.

Следовательно, необходимо устранить проблемы с утечкой памяти.

Что такое функция очистки useEffect?

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

useEffect построен таким образом, что мы можем вернуть функцию внутри него, и именно в этой функции возврата происходит очистка.

Например, Компонент А запрашивает у API список продуктов, но при этом асинхронном запросе Компонент А удаляется из DOM (размонтируется). Нет необходимости выполнять этот асинхронный запрос.

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

Функция очистки useEffect:

useEffect(() => {
  // Your effect
  return () => {
    // Cleanup
  }
}, [input])

Очистка эффекта

Отмена запроса на получение

Есть разные способы отменить вызовы запросов на выборку, мы можем использовать fetch AbortController или Axios AbortController.

Чтобы использовать AbortController, мы должны создать контроллер с помощью конструктора AbortController(). Затем, когда инициируется наш запрос на выборку, мы передаем AbortSignal в качестве опции внутри объекта запроса options.

Это связывает контроллер и сигнал с запросом на выборку и позволяет отменить его в любое время с помощью AbortController.abort():

Очистка тайм-аутов

При использовании функций таймера setTimeout(callback, time) мы можем очистить их при размонтировании с помощью специальной функции clearTimeout(timerId).

Очистка интервалов

Как и тайм-ауты, setIntervals(callback, time) имеют специальную функцию для их очистки с помощью функции clearInterval(intervalId).

Очистка прослушивателей событий

Очистка слушателей происходит через window.removeEventListener. Вызов removeEventListener должен ссылаться на ту же функцию в вызове removeEventListener, чтобы правильно удалить прослушиватель.

Очистка веб-сокетов

Когда вы создаете соединение WebSocket, вы можете закрыть его в функции очистки socket.close().

Заключение

Мы узнали, что некоторые побочные эффекты требуют очистки, чтобы избежать утечек памяти и ненужного и нежелательного поведения. Мы должны узнать, когда и как использовать функцию очистки useEffecthook, чтобы избежать этих проблем и оптимизировать приложения.

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

Я надеюсь, что вы нашли эту статью полезной и теперь вы можете правильно использовать функцию очистки.

Подробнее



Создайте блог с файлами React и Markdown
Создайте обучающий блог с подсветкой синтаксиса кода, темным режимом и копированием в буфер обменаblog.bitsrc.io





Разработка приложения CRUD в React JS с поддельным API Rest
Добавление функций CRUD с сервером JSONbetterprogramming.pub



Want to Connect?
Love connecting with friends all around the world on Twitter.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Загляните в наше Сообщество Discord и присоединитесь к нашему Коллективу талантов.