☕ 15 кастомных хуков для облегчения компонентов React
Появившиеся в React 16.8 хуки позволяют использовать состояние и прочие возможности библиотеки без написания классов. В небольшом обзоре приводятся 15 наиболее полезных из них.
React hooks – это модное в сообществе слово. Скорее всего каждый разработчик React знает, что такое хуки.
Кастомные хуки позволяют
извлекать логику компонентов в повторно используемую функцию, что повышает
разделение компонентов и надежность. Приступим к рассмотрению пятнадцати React hooks,
которые сделают ваш компонент легковесным.
1. useIdle
С помощью useIdle можно
отслеживать, находится ли пользователь на странице в режиме ожидания. Можете
передать два параметра: ms – время ожидания и initialState, который позволяет
пользователю изначально установить режим ожидания.
2. useInterval
Этот хук можно использовать
для функций с интервалами, которые автоматически размонтируют компонент clearInterval. Он также позволяет приостановить интервал,
установив задержку равной нулю.
3. useScroll
Используется для
прослушивания события прокрутки элемента и перерисовки при прокрутке. Не
требует ручного добавления слушателей событий JavaScript.
4. useToggle
С помощью useToggle можно переключаться между
двумя состояниями: TRUE и FALSE. Такой подход уменьшает «ручную» логику.
5. useTitle
Хук используется для
установки заголовка страницы.
6. usePrevious
Чтобы получить предыдущее
состояние, можно юзать этот хук. Возможно вам даже не потребуется писать кастомную
логику и что-то допиливать.
7. useSetState
Этот крючок используется
для объединения объектов в их текущем состоянии, аналогично this.setState в
компоненте класса. Если вы используете несколько состояний, их можно привести к
одному с помощью useSetState.
8. useCookie
Хук используется для
возврата текущего значения cookie, обратного вызова обновления и удаления
cookie.
9. usePermission
usePermission
следует применять для получения permission-статуса API браузера. Передайте имя API, чтобы
получить статус.
10. useDebounce
Хук используется
для задержки события до завершения времени ожидания. В приведенном ниже коде
заданное состояние выполняется после завершения времени ожидания:
11. useGeolocation
Этот хук выгодно
применять для получения геолокации пользователя. useGeolocation возвращает широту, долготу, высоту и другую полезную
информацию.
12. useNetworkState
Приведенный ниже код используется
для получения сетевого статуса браузера. useNetworkState
можно применять для показа пользователю состояния подключения.
13. useCopyToClipboard
Хотите скопировать текст
в буфер обмена? useCopyToClipboard – именно то, что вам необходимо.
14. useFavicon
Крючок useFavicon используется для установки иконки
на странице.
15. useError
Применяйте useError для
контроля и отправки ошибок.
Заключение
В репозитории react-use на GitHub есть еще несколько настраиваемых хуков. Надеюсь, вы сочтете их полезными. Спасибо за внимание!
Какие хуки React используете вы? Делитесь ими в комментариях.