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

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

1. Реагировать на запрос

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

Функции

  • Независимая от транспорта/протокола/бэкенда выборка данных (REST, GraphQL, промисы, что угодно!)
  • Автоматическое кэширование + повторная загрузка (устаревшие при повторной проверке, перефокусировка окна, опрос/в реальном времени)
  • Параллельные + зависимые запросы
  • Мутации + реактивная повторная выборка запроса
  • Многоуровневый кеш + автоматическая сборка мусора
  • Запросы с разбиением на страницы и курсором
  • Load-More + бесконечные запросы прокрутки с восстановлением прокрутки
  • Отмена запроса
  • React Suspense + Предварительная выборка запроса Fetch-As-You-Render
  • Специальные инструменты для разработчиков.

2. Реагируйте на использование

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

3. использовать http

Это отличный пакет, который используется в качестве замены Fetch API.

Функции

  • Поддержка SSR (рендеринг на стороне сервера)
  • Поддержка TypeScript
  • 2 зависимости (use-ssr, urs)
  • Поддержка GraphQL (запросы + мутации)
  • Поставщик для установки URL-адреса и параметров по умолчанию
  • Перехватчики запросов/ответов
  • Реагировать на нативную поддержку
  • Прерывает/отменяет ожидающие HTTP-запросы, когда компонент размонтируется
  • Встроенное кэширование
  • Поддержка постоянного кэширования
  • Подвеска (экспериментальная) поддержка
  • Функция повтора

Хук react-sensor отслеживает состояние медиа-запроса CSS. Для этого должно быть простое решение, поскольку медиа-запросы чрезвычайно важны для отзывчивости любого приложения или веб-сайта.

5. Форма React Hooks

React Hooks для управления состоянием формы и проверки (Web + React Native). Это уменьшает количество кода, который вам нужно написать, удаляя при этом ненужные повторные рендеры.

Функции

  • Создан с учетом производительности, UX и DX
  • Включает встроенную проверку формы HTML
  • Готовая интеграция с UI-библиотеками
  • Небольшой размер и отсутствие зависимостей
  • Поддержка Yup, Zod, AJV, Superstruct, Joi, Vest, class-validator, io-ts, nope и пользовательская сборка.

6. Редукционные крючки

Redux — самая популярная библиотека управления состоянием, большая часть которой уже использует Redux. Redux Hooks предлагает альтернативу шаблону HOC (компонент высшего порядка) с существующим методом connect(). Redux Hooks упростили подключение к магазину, выборку данных и отправку действий. Давай увидим это.

Популярные хуки Redux

  • использованиеселектор
  • использованиеОтправка
  • использоватьStore

7. Констейт

Это позволяет создавать локальные состояния с помощью React Hooks и использовать их в качестве React Context только при необходимости с минимальными усилиями.

Заключение

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

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

Спасибо за чтение..!!

Первоначально опубликовано на https://blog.haiderkhan.dev.