Persisting State

persistPage.basicUsage.title

persistPage.basicUsage.description

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'counter-storage', // unique name for localStorage key
    }
  )
)

persistPage.configOptions.title

persist(
  (set) => ({ ... }),
  {
    name: 'storage-key',        // required: storage key name
    storage: createJSONStorage(() => sessionStorage), // optional: use sessionStorage
    partialize: (state) => ({ count: state.count }),  // optional: persist only specific fields
    version: 1,                 // optional: version for migrations
    migrate: (persistedState, version) => {           // optional: migration function
      // migrate old state to new version
      return persistedState
    },
  }
)

persistPage.sessionStorage.title

persistPage.sessionStorage.description

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

const useStore = create(
  persist(
    (set) => ({
      user: null,
      setUser: (user) => set({ user }),
    }),
    {
      name: 'user-storage',
      storage: createJSONStorage(() => sessionStorage),
    }
  )
)

persistPage.partial.title

persistPage.partial.description

const useStore = create(
  persist(
    (set) => ({
      user: null,
      token: null,
      tempData: null, // won't be persisted
      setUser: (user) => set({ user }),
    }),
    {
      name: 'auth-storage',
      partialize: (state) => ({ 
        user: state.user, 
        token: state.token 
      }),
    }
  )
)

persistPage.hydration.title

persistPage.hydration.description

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      _hasHydrated: false,
      setHasHydrated: (state) => set({ _hasHydrated: state }),
    }),
    {
      name: 'counter-storage',
      onRehydrateStorage: () => (state) => {
        state?.setHasHydrated(true)
      },
    }
  )
)

// In your component
function Counter() {
  const hasHydrated = useStore((state) => state._hasHydrated)
  const count = useStore((state) => state.count)

  if (!hasHydrated) {
    return <div>Loading...</div>
  }

  return <div>Count: {count}</div>
}