Zustand
Тема дорожной карты · React
zustand — лёгкая, безопinionная библиотека управления состоянием для React, хранящая состояние приложения вне дерева компонентов в обычном JavaScript-объекте («store»), доступном через простой хук useStore без boilerplate Provider, требуемого Redux или Context API. Store zustand создаётся функцией create, принимающей callback с set и get для определения начального состояния и actions; результирующий хук можно вызвать из любого React-компонента с опциональным selector для предотвращения лишних рендеров. zustand полностью совместим с TypeScript: паттерн create<StoreType>() выводит все свойства состояния и типы actions, обеспечивая полную типобезопасность с минимальными аннотациями. В отличие от Redux Toolkit, zustand не навязывает архитектурных паттернов вроде reducers или action creators, что делает его идеальным для малых и средних React-приложений. zustand бесшовно работает с SSR в Next.js через createWithEqualityFn и инициализацию per-request, а его система middleware поддерживает персистентность (zustand/middleware/persist), интеграцию с immer и devtools.
Как это работает
Zustand в React выходит за пределы useState + Context, когда app-state большой, выводимый в нескольких местах или требует middleware (логирование, persistence, undo). Zustand — самая маленькая API-поверхность (один store, селекторы, без бойлерплейта). Redux Toolkit — официальный преемник Redux: предсказуемые reducers, devtools, RTK Query для данных. Jotai/Recoil моделируют state как атомы — у каждого своя подписка, ререндеры гранулярны.
Когда применять
Берите Zustand для новых проектов, если нет Redux-экспертизы или потребности в RTK Query — самый простой путь. Redux Toolkit — когда команда знает Redux или нужна экосистема devtools/middleware. Jotai/Recoil — когда state по природе атомарный (много независимых маленьких кусков). Оставайтесь на useState + Context, пока не упрётесь в prop drilling или perf-проблемы, оправдывающие библиотеку.
Типичные ошибки
Ловушки Zustand: Redux на маленьком приложении (гора бойлерплейта ради slice, помещающегося в useState); server-cache в state-библиотеке вместо TanStack Query (плохо переизобретаете кеш); чрезмерные селекторы и ререндер на любое изменение state; смешивание двух state-библиотек (Redux + Zustand) без чётких границ. Выберите одну и используйте везде.