PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Где применяется Hook в State Manager?

Хуки

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

Где именно хуки в стейт-менеджерах

Redux (react-redux):

const items = useSelector((s) => s.cart.items); // подписка на кусок стора
const dispatch = useDispatch();                  // отправка действий

useSelector подписывает компонент: при изменении результата селектора — ререндер. Под капотом — useSyncExternalStore.

Zustand — сам стор и есть хук:

const useCart = create((set) => ({
  items: [],
  add: (item) => set((s) => ({ items: [...s.items, item] })),
}));

const items = useCart((s) => s.items); // хук + селектор

MobX, Jotai, React Query — везде тот же паттерн: useAtom, useQuery, observer-обёртки; хук = точка подписки.

Что даёт хук-интерфейс

  • Точечные подписки: компонент ререндерится только при изменении выбранных селектором данных — в отличие от контекста.
  • Декларативность: const user = useUser() — одна строка вместо HOC-обёрток (connect) прошлой эпохи.
  • Композиция: хуки стора комбинируются в кастомные хуки с логикой (useCartTotal = useCart + useMemo).

Фундамент: useSyncExternalStore

React 18 дал библиотекам официальный хук подписки на внешние сторы: useSyncExternalStore(subscribe, getSnapshot) — корректная работа с конкурентным рендерингом (без tearing — рассинхрона данных внутри одного кадра). Современные стейт-менеджеры построены на нём.

Коротко для собеседования

Хуки в стейт-менеджерах — интерфейс подписки и действий: useSelector/useDispatch в Redux, стор-как-хук в Zustand, useAtom в Jotai. Дают точечные ререндеры по селекторам и композицию логики; в основе современных реализаций — useSyncExternalStore из React 18.

Другие вопросы раздела