Вопрос с собеседования · Frontend

Как создать хранилище Zustand и подписаться на его часть?

Q: Как создать хранилище Zustand и подписаться на его часть?

create создаёт хук-хранилище: состояние и функции изменения в одном объекте, без провайдера. Компонент подписывается селектором — useCart(s => s.items.length) — и перерисовывается, только когда выбранная часть изменилась. Изменения — через set, неизменяемо (или с middleware immer). Подходит для клиентского глобального состояния: корзина, настройки интерфейса, черновики. Серверные данные лучше держать в TanStack Query. Селектор, возвращающий новый объект, вызывает лишние рендеры — useShallow persist middleware — сохранение в localStorage Хранилищ можно сделать несколько по областям Без селектора компонент подписывается на всё хранилище

JuniorReact

Ещё спрашивают так:

Чем Zustand проще Redux?

Коротко

create создаёт хук-хранилище: состояние и функции изменения в одном объекте, без провайдера. Компонент подписывается селектором — useCart(s => s.items.length) — и перерисовывается, только когда выбранная часть изменилась. Изменения — через set, неизменяемо (или с middleware immer). Подходит для клиентского глобального состояния: корзина, настройки интерфейса, черновики. Серверные данные лучше держать в TanStack Query.

Селектор, возвращающий новый объект, вызывает лишние рендеры — useShallow
persist middleware — сохранение в localStorage
Хранилищ можно сделать несколько по областям

А ещё Без селектора компонент подписывается на всё хранилище

Подробно

const useCart = create<CartState>()(set => ({
  items: [],
  add: item => set(s => ({ items: [...s.items, item] })),
  clear: () => set({ items: [] }),
}));
const count = useCart(s => s.items.length);
const add = useCart(s => s.add);

Что хотят услышать

create без провайдера.
Подписка селектором.
Неизменяемые обновления через set.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ

✓create даёт хук-хранилище; селектор перерисовывает только при смене выбранной части
✗Zustand требует оборачивать всё приложение в Provider, как Redux и обычный React Context
✗Компонент с селектором перерисовывается при любом изменении хранилища, а не только своей части
✗Zustand предназначен только для серверных данных и полностью заменяет собой TanStack Query

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования