> Что такое Zustand и как он используется (JavaScript)

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

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

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

Zustand (нем. "состояние") решает задачу управления глобальным состоянием в React. В отличие от Redux или Context API, Zustand не требует оборачивания приложения в провайдеры. Библиотека основана на паттерне store - едином объекте, который содержит состояние и методы для его изменения.

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

• минимальный API: create для создания store, useStore для подписки
• поддержка middleware (например, immer, persist, devtools)
• возможность создания нескольких независимых store
• автоматическая оптимизация ререндеров через селекторы
• работа вне React-компонентов (например, в обработчиках событий)

Zustand подходит для средних и крупных приложений, где нужно простое, но гибкое управление состоянием без избыточных абстракций.

На практике

Для использования Zustand установите пакет: npm install zustand. Затем создайте store с помощью функции create, передав ей функцию, которая возвращает начальное состояние и методы. В компонентах используйте хук useStore с селектором для получения нужной части состояния.

Пример типичного сценария: управление корзиной в интернет-магазине. Store содержит массив товаров и методы addItem, removeItem, clearCart. Компоненты подписываются только на нужные части (например, количество товаров или общую сумму).

Пример кода

JAVASCRIPT
import { create } from 'zustand';

// Создаем store для корзины
const useCartStore = create((set) => ({
  items: [],
  total: 0,
  addItem: (item) =>
    set((state) => ({
      items: [...state.items, item],
      total: state.total + item.price,
    })),
  removeItem: (id) =>
    set((state) => {
      const item = state.items.find((i) => i.id === id);
      return {
        items: state.items.filter((i) => i.id !== id),
        total: state.total - (item ? item.price : 0),
      };
    }),
  clearCart: () => set({ items: [], total: 0 }),
}));

// Использование в компоненте
function CartTotal() {
  const total = useCartStore((state) => state.total);
  return <div>Total: ${total}</div>;
}

function AddItemButton({ item }) {
  const addItem = useCartStore((state) => state.addItem);
  return <button onClick={() => addItem(item)}>Add to cart</button>;
}

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

Начните с краткого определения Zustand как легковесной альтернативы Redux. Подчеркните отсутствие необходимости в Provider и минимальный boilerplate. Приведите пример создания store и подписки в компоненте. Упомяните селекторы для оптимизации производительности. Если спросят про сравнение с Redux, отметьте, что Zustand проще в настройке, но Redux предоставляет более строгую архитектуру и богатую экосистему middleware.

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

Интервьюер оценивает понимание:

• концепции глобального состояния и его отличия от локального
• принципов работы подписок и реактивности в React
• умения выбирать подходящий инструмент для задачи
• способности объяснить trade-off между простотой и функциональностью

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

• Путать Zustand с Context API или думать, что это одно и то же
• Создавать store внутри компонента (store должен быть вне компонента)
• Подписываться на весь store без селектора, что вызывает лишние ререндеры
• Использовать Zustand для простого локального состояния, где достаточно useState
• Забывать про middleware (например, persist для localStorage) при необходимости