Identify a persisted store entry
Saving client-side state across reloads
Zustand · Pipe
name
The persist middleware's required name option is the storage key for a Zustand store's persisted state. It must be unique.
How it works
The persist middleware requires a name option and uses its string value as the key under which the Zustand state is stored. The key must be unique within the selected storage, such as localStorage, AsyncStorage, or IndexedDB.
Syntax
persist(stateCreator, { name: string })Parameters
| Name | Type | Description |
|---|---|---|
name | string | The unique storage key used for the persisted Zustand state. |
Returns
The documentation does not specify a separate return value for the name option.
Key points
- A persist configuration must provide name; the documentation marks it as the sole required option.
- The supplied string becomes the key used to locate the persisted Zustand state.
- The key identifies where the store's state is written in the selected storage.
- Choose a distinct name for each persisted store to avoid storage-key collisions.
Common mistakes
- Reusing the same name for multiple persisted stores can make them target the same storage entry, so choose a distinct key.
Example: Persisted store with a unique name
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
type BearStore = {
bears: number
addBear: () => void
}
const useBearStore = create<BearStore>()(
persist(
(set) => ({
bears: 0,
addBear: () => set((state) => ({ bears: state.bears + 1 })),
}),
{ name: 'bear-storage' },
),
)
export function App() {
const bears = useBearStore((state) => state.bears)
return <button onClick={useBearStore.getState().addBear}>{bears}</button>
}The persist middleware uses the supplied name as the storage key for this store.
When to use it
Prevent storage-key collisions
Maintaining several persisted stores
Name state in configured storage
Using different persistence backends
Interview questions
QWhat does the name option do in Zustand's persist middleware?
The name option is the storage key for the persisted Zustand state. It is the only required persist option, and its value identifies the entry in the configured storage.
Follow-up: What should be checked if two stores interfere with each other? Verify that their persist names are different, because the name must be unique.
QHow do you configure name?
Pass name inside the second argument to persist, alongside the store initializer. For example, persist((set) => ({ count: 0 }), { name: 'counter-storage' }).
Follow-up: Can the option be omitted? No. The documentation identifies name as the only required option.
QIs name the storage backend?
The option does not itself choose a storage implementation; it supplies the key used by the middleware in the storage where state is persisted. The documentation lists localStorage, AsyncStorage, and IndexedDB as examples of storage targets.
Follow-up: How can the storage target be changed? Configure the persist middleware's storage-related options while retaining a unique name for the entry.
Related
persiststoragelocalStorageAsyncStorageIndexedDB