> Использовал ли ты Zustand (React)

Короткий ответ

Да, я использовал Zustand в нескольких коммерческих проектах. Это лёгкая библиотека для управления состоянием в React, которая предлагает простой API без boilerplate, основанный на хуках. Основные преимущества - минималистичный синтаксис, отсутствие провайдеров и встроенная поддержка middleware, таких как persist и devtools. Zustand хорошо подходит для средних и крупных приложений, где нужно избежать избыточности Redux.

Подробное объяснение

Zustand - это state management библиотека, которая решает проблему глобального состояния в React без сложных паттернов. В отличие от Redux, она не требует создания store, reducers, actions и dispatch. Вместо этого Zustand использует простой create API, возвращающий хук. Состояние обновляется через set, который поддерживает partial updates и merge по умолчанию.

Ключевые особенности:

• Отсутствие Provider - store доступен напрямую из любого компонента, что упрощает тестирование и изоляцию.
• Selectors для производительности - можно подписываться только на часть состояния, избегая лишних ререндеров.
• Middleware - встроенная поддержка persist (localStorage, AsyncStorage), devtools (интеграция с Redux DevTools), immer (для иммутабельных обновлений).
• Async actions - set можно использовать внутри асинхронных функций без дополнительных thunk или saga.
• Computed values - через get() или производные селекторы.

Zustand не заменяет React Context для локального состояния, но эффективен для глобального состояния, кэширования данных, UI-состояний (темы, модалки). Он хорошо сочетается с React Query или SWR для серверных данных, оставляя клиентское состояние за собой.

На практике

В проектах я использовал Zustand для:

• Управления состоянием корзины в e-commerce приложении с persist в localStorage.
• Хранения настроек пользователя (тема, язык) с синхронизацией через middleware.
• UI-состояний (открытые модалки, активные табы) без лишнего проп-дриллинга.

Типичный workflow: создаю store с начальным состоянием и экшенами, затем импортирую хук в компоненты. Для сложных обновлений использую immer middleware. Для отладки - devtools middleware, что даёт временную шкалу изменений в Redux DevTools.

Пример кода

TYPESCRIPT
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartStore {
  items: CartItem[];
  total: number;
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  clearCart: () => void;
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      total: 0,
      addItem: (item) => {
        const items = get().items;
        const existing = items.find((i) => i.id === item.id);
        if (existing) {
          set({
            items: items.map((i) =>
              i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
            ),
          });
        } else {
          set({ items: [...items, { ...item, quantity: 1 }] });
        }
        set({ total: get().items.reduce((sum, i) => sum + i.price * i.quantity, 0) });
      },
      removeItem: (id) => {
        set((state) => ({
          items: state.items.filter((i) => i.id !== id),
          total: state.items
            .filter((i) => i.id !== id)
            .reduce((sum, i) => sum + i.price * i.quantity, 0),
        }));
      },
      clearCart: () => set({ items: [], total: 0 }),
    }),
    { name: 'cart-storage' }
  )
);

Как отвечать на собеседовании

Начни с краткого утверждения об опыте использования. Затем объясни, почему выбрал Zustand вместо альтернатив - подчеркни простоту, производительность и гибкость. Приведи конкретный пример из практики, упомянув middleware (persist, devtools). Покажи понимание trade-off: Zustand не подходит для очень сложных состояний с множеством зависимостей, где Redux с нормализацией данных может быть удобнее. Заверши сравнением с React Context - укажи, что Zustand решает проблему лишних ререндеров и не требует Provider.

Что проверяет интервьюер

• Знание современных state management решений и умение выбирать инструмент под задачу.
• Понимание принципов работы Zustand: store, selectors, middleware, асинхронные обновления.
• Умение объяснить, как Zustand решает проблемы производительности (избегание ререндеров через селекторы).
• Способность сравнить Zustand с Redux, MobX, React Context и обосновать выбор.
• Практический опыт - знание типичных сценариев использования и подводных камней (например, stale closures при использовании get() внутри экшенов).

Типичные ошибки

• Утверждение, что Zustand полностью заменяет Redux - на самом деле для сложных состояний с нормализацией Redux может быть удобнее.
• Игнорирование middleware - persist и devtools критичны для реальных проектов.
• Неправильное использование селекторов - подписка на весь store вместо части состояния приводит к лишним ререндерам.
• Создание множества store вместо одного - это усложняет поддержку, хотя Zustand это позволяет.
• Забывание про асинхронные экшены - set работает внутри async функций без дополнительных библиотек, но нужно учитывать race conditions.