Где применяется 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.