Imperative application callbacks
A WebSocket, timer, or event listener needs to inspect or change Zustand state without rendering a component.
Zustand · Module
getState
getState is an imperative API attached to a Zustand hook created with create. It returns the store's current state, enabling reads and action calls outside React component rendering.
How it works
The getState utility is attached to the hook returned by create. Calling it returns the store's current state, including its data and actions, so non-React code can inspect state or invoke an action directly.
Syntax
useStore.getState()Returns
The current state of the store, including its state values and actions.
Key points
getStateis available directly on the hook produced bycreate, rather than requiring a separate store lookup.- React components normally read derived data through a selector; imperative callers can instead retrieve the current store object with
getState(). - The hook's component-facing form expects a selector argument, while
getState()is the attached imperative API for direct access. - Calls that update state through an action obtained from
getState()can interact with React's batching behavior, especially before React 18.
Common mistakes
- Do not call the store's
getfunction while the store is being initialized; defer access until after creation, such as inside an action. - In pre-React 18 environments, invoking an action through
getState()outside a React event handler may require batching to avoid synchronous component updates.
Example: Read and update state outside a component
import { create } from 'zustand'
type CounterStore = {
count: number
increment: () => void
}
const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
const currentCount = useCounterStore.getState().count
useCounterStore.getState().increment()
console.log(currentCount)Read the current snapshot directly, then invoke an action without using the React hook.
When to use it
Non-React state updates
A utility module needs to invoke a store action while remaining independent of React component hooks.
Snapshot reads
Code needs the current value at a specific instant rather than a reactive component subscription.
Interview questions
QWhat does Zustand's getState do?
The hook returned by create exposes getState as an API utility. Calling useStore.getState() reads the current store state without subscribing a React component.
Follow-up: How would non-React code trigger an update? Call useStore.getState() to obtain an action and invoke it; in pre-React 18 code, consider batching the call when it occurs outside an event handler.
QWhat can you obtain from getState()?
getState returns the complete current state object, so the result can contain both ordinary state values and action functions. It is useful for imperative code such as callbacks or other modules.
Follow-up: What is the subscription trade-off? A direct getState() read is an imperative snapshot access, whereas a component hook selector subscribes the component to selected changes.
QWhere is getState available?
getState is attached to the hook returned by create, alongside setState, getInitialState, and subscribe. This means the same store object supports both React usage and imperative access.
Follow-up: When should initialization-time access be avoided? Do not synchronously call the creator's get or store arguments during initialization; use them only after creation, for example in an action.
Related
createsetStategetInitialStatesubscribe