React-хукиExplained

24 of 24 rows

Хук↕	Что делает↕	Для чего использовать↕
Состояние
⤢useState	Хранит одно значение, изменение которого вызывает повторный рендер.	Локальное состояние компонента: поля форм, переключатели, счётчики.
⤢useReducer	Хранит состояние, управляемое редьюсером действий, как небольшой стор.	Состояние из нескольких связанных полей или со сложными переходами.
⤢useRef	Хранит изменяемое значение, которое НЕ вызывает повторный рендер.	Изменяемые контейнеры, таймеры и прямой доступ к DOM через .current.
Эффекты
⤢useEffect	Запускает побочный эффект после рендера, с необязательной очисткой.	Загрузка данных, подписки и синхронизация с внешней системой.
⤢Effect cleanup	Функция, возвращённая эффектом, выполняется перед следующим эффектом и ещё раз при размонтировании.	Отмена подписок и таймеров или прерывание выполняющегося запроса.
⤢useLayoutEffect	Как useEffect, но срабатывает синхронно после изменения DOM.	Чтение или запись раскладки до отрисовки браузером (тосты, тултипы).
⤢useEffect vs handlers	Обработчики событий выполняются в ответ на действие пользователя; эффекты — после рендера, для синхронизации.	Логика по действию пользователя принадлежит обработчику, логика по рендеру — эффекту.
⤢StrictMode	В разработке монтирует компоненты дважды, чтобы эффекты выполнились, очистились и выполнились снова.	Поиск двойных подписок и отсутствующей очистки до продакшена.
Производительность
⤢useMemo	Кэширует вычисленное значение до изменения зависимостей.	Избегание дорогих пересчётов между рендерами; смените значение в зависимостях намеренно, чтобы сбросить кэш.
⤢useCallback	Кэширует ссылку на функцию до изменения зависимостей.	Стабильные колбэки, передаваемые мемоизированным детям или используемые как зависимости.
⤢React.memo	Пропускает повторный рендер компонента, чьи пропсы не изменились.	Тяжёлые дочерние компоненты; передайте функцию сравнения вторым аргументом, когда поверхностного равенства мало (HOC, а не хук).
Контекст и внешние дескрипторы
⤢useContext	Читает значение контекста без проброса пропсов.	Тема, локаль или авторизованный пользователь, общие для всего дерева.
⤢useImperativeHandle	Настраивает экземпляр, который родитель видит через ref.	Передача узкого API из дочернего компонента через forwardRef.
Конкурентность и прочее
⤢useTransition	Помечает обновление состояния как несрочное, чтобы интерфейс оставался отзывчивым.	Сохранение отзывчивости ввода, пока тяжёлый список перерендеривается.
⤢useDeferredValue	Откладывает значение, чтобы обновления можно было прерывать.	Дебаунс дорогих рендеров без таймеров.
⤢useId	Генерирует стабильный уникальный id для атрибутов доступности.	Связывание label и input между серверным и клиентским рендером.
⤢use()	Читает промис или контекст во время рендера; единственный хук, который можно вызывать условно.	Распаковка промиса с Suspense или чтение контекста внутри раннего return.
⤢useActionState	Хранит состояние, управляемое действием формы, с флагом ожидания в комплекте.	Отправки форм, возвращающие ошибки или обновлённое состояние для показа инлайн.
⤢useOptimistic	Сразу рендерит оптимистичное значение, а затем возвращается к реальному состоянию, когда действие завершится.	Показ лайка или отправленного сообщения, пока запрос к серверу в полёте.
⤢useFormStatus	Читает состояние ожидания окружающего <form>, без пропсов.	Кнопка отправки, которая отключается, пока родительская форма отправляется.
⤢useSyncExternalStore	Подписывается на стор вне React и читает один согласованный снапшот.	Браузерные API вроде статуса сети или сторонние сторы состояния.
⤢useInsertionEffect	Запускается до эффектов раскладки, создан для вставки правил CSS-in-JS.	Библиотеки стилей, которым нужно вставить правила до чтения раскладки.
⤢useDebugValue	Показывает собственную метку для внутреннего состояния хука в React DevTools.	Маркировка того, что хранит кастомный хук, при отладке.
⤢Custom hooks (use*)	Ваш собственный хук, компонующий встроенные, чтобы делиться логикой.	Многоразовая логика с состоянием вроде useFetch или useMediaQuery.