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

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

Прежде всего, я хотел бы вкратце рассказать о хуке useEffect. Хук useEffect - один из самых полезных функциональных хуков React, если вы уже знакомы с компонентами React на основе классов, тогда вы можете считать его почти похожим на хук componentDidMount, который используется для выполнения вызовов API, поскольку он запускается как компоненты загружаются впервые.

Таким образом, хук useEffect также используется для выполнения вызовов API в функциональном компоненте React, но у него есть 2 привлекательные функции:

  1. Массив зависимостей - ловушка useEffect будет запускаться в первый раз при загрузке компонента, но кроме этого у нас есть возможность запускать это всякий раз, когда что-то в нашем компоненте изменяется, поэтому мы можем добавить эту изменяющуюся вещь в dependency array, и всякий раз, когда зависимость изменяется, мы увидим, что useEffect будет вызываться автоматически. (Обычно полезно для запроса при изменении некоторых данных компонента).
  2. Функция очистки - запускается перед запуском компонента useEffect, но во второй раз, а затем не во время начальной загрузки компонента. Не беспокойтесь об этом, вы узнаете об этом больше в статье.

Синтаксис: useEffect(() => {}, [])

2-й аргумент: массив зависимостей.

Итак, всякий раз, когда мы вводим что-то в панель поиска или любое другое поле ввода, которое приводит к вызову API, можно предотвратить с помощью useHooks, например, в строке поиска вы делаете запрос к некоторому API задания для получения данных о вакансии и говорите, что вы хотите получить задание данных React, и когда вы начинаете печатать, даже когда вы пишете первую букву «R», API запускается для получения заданий с «R», и то же самое происходит с каждым изменением ввода. Итак, если мы хотим, чтобы API запускался только тогда, когда написано полное слово, мы будем использовать хуки с функцией очистки.

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

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

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

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

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

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

Надеюсь, вы кое-что узнали из этой статьи! Спасибо за чтение.

Больше контента на plainenglish.io