Zustand
Тема дорожной карты · Frontend разработчик
Zustand — это лёгкая, непредвзятая библиотека управления состоянием для React, предоставляющая глобальное хранилище с минимальным API и нулевым шаблонным кодом, что делает её одной из самых популярных альтернатив Redux в экосистеме React. Хранилище Zustand создаётся с помощью create() и возвращает хук — const useStore = create((set) => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) })) — который компоненты вызывают напрямую для подписки на срезы состояния. Zustand избегает накладных расходов Context API, используя модель подписки, перерисовывающую только компоненты, выбирающие изменившийся фрагмент состояния через поверхностное равенство; из коробки поддерживаются middleware persist (синхронизация с localStorage) и devtools (интеграция с Redux DevTools). В TypeScript React-приложениях хранилища Zustand типизируются передачей интерфейса состояния как обобщения в create<StoreState>(), обеспечивая полное автодополнение и проверку типов для всего доступа к состоянию и мутаций.
Как это работает
Zustand начинается с локального state компонента (useState); как только двум компонентам нужны те же данные — поднимайте к общему родителю. Для app-wide state выбирайте по сложности: Context API (встроенный, редкие изменения), Zustand (минимальный API, один store, селекторы), Redux Toolkit (предсказуемые reducers, devtools, RTK Query для server state), Jotai/Recoil (atom-based, fine-grained реактивность). Server state (данные с API) — в TanStack Query или SWR, не в глобальном store.
Когда применять
По умолчанию useState + lifting state up; библиотека — только когда prop drilling переваливает 3+ слоя или perf требует селекторов. Zustand — для новых проектов: минимальный API. Redux Toolkit — когда команда знает Redux или нужен RTK Query. Всегда разделяйте server state (TanStack Query) и client state (Zustand/Redux). Для форм react-hook-form — де факто стандарт.
Типичные ошибки
Ловушки Zustand: весь state в Redux, когда local state хватает (бойлерплейт без пользы); server-fetched данные в Redux вместо TanStack Query (плохо переизобретаете кеш); чрезмерный Context (ререндер всех consumer на любое изменение); селекторы, всегда возвращающие новый объект (ломают мемоизацию). Прочтите "common mistakes" каждой библиотеки до принятия.