advanced

Persist middleware

Сохраняйте выбранное клиентское состояние с миграциями, обработкой гидратации и решениями по безопасности хранилища.

Middleware `persist` записывает часть store в хранилище (localStorage, sessionStorage, async-адаптеры) и восстанавливает при загрузке. Настройте `name`, `partialize` для whitelist полей и `version` + `migrate` при смене схемы.

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

const useSettings = create(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme }),
    }),
    {
      name: 'settings',
      partialize: (s) => ({ theme: s.theme }),
      version: 1,
    },
  ),
);
				

При SSR обрабатывайте расхождение hydration: отложенный render или `onRehydrateStorage`. Не персистьте токены и PII без шифрования и threat model.

Компромисс: восстановленный UX между сессиями против лимитов хранилища, миграций и утечки чувствительных полей.

На интервью: что персистить, стратегия миграций, flash при hydration.

Типовые ошибки: персист всего store включая actions, нет version при смене формы, устаревший персист перебивает серверную истину.

Чеклист:

  • partialize только безопасные поля.
  • Версионированные миграции.
  • UX rehydration при SSR.
  • Серверное состояние всё равно refetch после hydrate.