15 кастомных хуков для облегчения компонентов React

15 кастомных хуков для облегчения компонентов 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 следует применять для получения p ermissio n -статуса API браузера. Передайте имя API, чтобы получить статус.

10. useDebounce

Хук используется для задержки события до завершения времени ожидания. В приведенном ниже коде заданное состояние выполняется после завершения времени ожидания:

11. useGeolocation

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

12. useNetworkState

Приведенный ниже код используется для получения сетевого статуса браузера. useNetworkState можно применять для показа пользователю состояния подключения.

13. useCopyToClipboard

Хотите скопировать текст в буфер обмена? useCopyToClipboard – именно то, что вам необходимо.

14. useFavicon

Крючок useFavicon используется для установки иконки на странице.

15. useError

Применяйте useError для контроля и отправки ошибок.

Заключение

В репозитории react-use на GitHub есть еще несколько настраиваемых хуков. Надеюсь, вы сочтете их полезными. Спасибо за внимание!