Provider-free global state
A client-side React application needs shared state without wrapper components.
Zustand · Const
no provider needed
Zustand's React hook can be used directly in components without a provider. Selectors subscribe each component to the state it needs.
How it works
A Zustand store created with create exposes a React hook that components can call directly. Components select the state or actions they need, and Zustand re-renders consumers when the selected state changes, so a provider is unnecessary for the usual store pattern.
Syntax
const useStore = create<State>((set) => ({ ... }))Parameters
| Name | Type | Description |
|---|---|---|
initializer | StateCreator<T> | State creator function that defines the store's initial state and actions; the official page presents this as the argument passed to create. |
Returns
A React hook for reading selected store state and subscribing components to changes.
Key points
- A React-bound Zustand hook can be imported and called in components without adding a provider to the component tree.
- Use selectors to choose the state consumed by each component rather than subscribing every component to the entire store.
- A consuming component updates when the selected state changes.
- The core pattern combines store creation and React consumption through one hook.
Common mistakes
- The provider-free hook pattern is not the right fit for every architecture: stores initialized from component props or isolated per request may need a vanilla store combined with React context.
Example: Using a Zustand hook without a provider
import { create } from 'zustand'
type CounterState = {
count: number
increment: () => void
}
const useCounterStore = create<CounterState>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
export function Counter() {
const count = useCounterStore((state) => state.count)
const increment = useCounterStore((state) => state.increment)
return <button onClick={increment}>{count}</button>
}The component reads selected state directly from the store hook, with no context or provider wrapper.
When to use it
Selector-based consumption
Several components need focused subscriptions to different parts of one store.
Lightweight feature state
A small feature needs shared state with minimal setup and boilerplate.
Interview questions
QWhy does a typical Zustand store not need a provider?
The store hook is usable directly inside any component, so Zustand does not require a React context provider for this pattern. A component selects the slice it consumes, and it re-renders when that selected state changes.
Follow-up: When might a provider be appropriate? Use a vanilla store with context when dependency injection, per-request isolation, or component-level initialization is required.
QHow does a component consume state from a provider-free store?
Create the store with Zustand's React-bound create API, then call the returned hook with a selector. The selector lets the component subscribe to only the state or action it needs.
Follow-up: What is the benefit of selecting a slice instead of reading the whole store? It limits subscriptions and avoids re-rendering for unrelated state changes.
QWhen is the no-provider pattern especially useful?
The provider-free approach is convenient for a normal client-side application because the store is module state and the hook can be imported wherever it is needed. It avoids context-provider and reducer boilerplate.
Follow-up: Why can global module state be problematic in server-rendered applications? A store can be shared across requests, so request-specific stores should be created and passed through context instead.
Related
createcreateStoreselectorsReact context