React and vanilla stores

A hook-bound store is the React hook with store API utilities returned by create. A vanilla store is a StoreApi returned by createStore, without a React hook.

How the two stores differ

Create a store without a React hook with createStore, imported from zustand/vanilla. It returns a StoreApi: an object with setState, getState, getInitialState and subscribe. Use it from non-React code, or pass it to useStore when a React component needs to subscribe to it.

mermaid
flowchart LR
  A["create()"] --> B["Hook-bound store"]
  B --> C["React component calls the store hook"]
  D["createStore()"] --> E["Vanilla StoreApi"]
  E --> F["Non-React code uses store utilities"]
  E --> G["useStore(store, selector)"]
  G --> H["React component subscribes to selected state"]

Both store creators take a state creator callback and initialize a store from its return value. For the initializer's library type, see StateCreator.

In React, pass the vanilla store and a selector to useStore to read the selected value. When a selector creates an object or array, see Select state efficiently.

Choosing a store

Choose	When	What you get
`create`	React components are the store's consumers.	A hook for selecting state in components, with store API utilities attached.
`createStore`	Code outside React needs the store API, or the store must be supplied to a React hook.	A vanilla `StoreApi`; use `useStore` to subscribe to it from React.

The hook-bound store type is UseBoundStore, which combines the store hook with its API. Both stores can be read or updated outside components through their attached or returned utilities. For the middleware caveat around vanilla setState and getState, see Subscribe outside React.

For an example of Zustand running, open the live demo. Continue with Create and bind a React store or Use a vanilla store in React.

How the two stores differ

Choosing a store

Was this page helpful?