Whole-state reset
Resetting a store to a known complete snapshot.
Zustand · Const
replace flag
The replace flag is the second argument to Zustand’s set or setState functions. Set it to true to replace the entire store state instead of shallow-merging an update.
How it works
Zustand normally shallow-merges updates into the current state. Supplying true as the replace flag makes the update replace the entire state, so the supplied value must be a complete valid state object rather than a partial update.
Syntax
set(partial, replace?)
setState(partial, replace?)Parameters
| Name | Type | Description |
|---|---|---|
partial | T | Partial<T> | ((state: T) => T | Partial<T>) | The new state, a partial state, or a function producing state; with replacement enabled, it must be complete. |
replace | boolean | Whether to replace the complete state instead of shallow-merging the update. |
Returns
void
Key points
- A functional update can return the replacement state when true is supplied as the second argument.
- A complete state object passed with true is a valid replacement update.
- TypeScript rejects an incomplete replacement object when the replace flag is true.
Common mistakes
- When replace is true, an incomplete object is invalid because it replaces rather than merges the current state.
- A runtime boolean can cause TypeScript overload problems; type the arguments using Parameters<typeof store.setState> when needed.
Example: Replace the complete store state
import { create } from 'zustand'
type Store = { bears: number }
const useBearStore = create<Store>(() => ({ bears: 0 }))
useBearStore.setState({ bears: 5 }, true)
console.log(useBearStore.getState())Pass true as the second argument to replace the entire store state.
When to use it
Complete value replacement
Replacing primitive or compound state with a newly constructed value.
Functional replacement
Applying a function that computes the next complete state.
Interview questions
QWhat does Zustand’s replace flag do?
The replace flag is the second argument to set or setState. When true, Zustand replaces the whole state instead of performing its default shallow merge, so the value must represent the complete state.
Follow-up: What happens with setState({}, true)? It is rejected by the stricter TypeScript typing because the empty object cannot represent the complete state.
QWhen should you use replacement instead of the default update behavior?
Use a partial update without the flag when changing selected properties. Pass true only when intentionally replacing the complete state object.
Follow-up: Why is replacement risky for nested data? Any nested data omitted from the replacement is discarded rather than retained by a merge.
QHow can TypeScript handle a dynamically determined replace flag?
A dynamic flag can be annotated by building the arguments as Parameters<typeof useBearStore.setState>, then spreading them into setState. This preserves the appropriate overload for the runtime boolean.
Follow-up: What must the replacement value contain when the runtime flag resolves to true? It must be a complete state object.
Related
setsetStatecreateStoregetStategetInitialState