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

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: HolyWeb

Стек: JavaScript

> Пример ответа

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

Основное использование: создание хранилища (store) с помощью функции create. Внутри передаётся объект с состоянием и методами для его обновления. Компоненты подписываются на нужные части состояния через селекторы, что предотвращает лишние ререндеры.

Пример:

JAVASCRIPT
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  return <button onClick={increment}>{count}</button>;
}

Zustand не зависит от React Context, работает с асинхронными действиями и легко интегрируется с TypeScript. Библиотека идеальна для средних и крупных проектов, где нужно простое и производительное управление состоянием.