# React and vanilla stores

A hook-bound store is the React hook with store API utilities returned by [`create`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#create). A vanilla store is a [`StoreApi`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#storeapi) returned by [`createStore`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#createstore), without a React hook.

## How the two stores differ

Create a store without a React hook with [`createStore`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#createstore), imported from `zustand/vanilla`. It returns a [`StoreApi`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#storeapi): an object with `setState`, `getState`, `getInitialState` and `subscribe`. Use it from non-React code, or pass it to [`useStore`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#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`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#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](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/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`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#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](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/subscribe-outside-react).

For an example of Zustand running, open the [live demo](https://zustand-demo.pmnd.rs/). Continue with [Create and bind a React store](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/create-and-bind-a-react-store) or [Use a vanilla store in React](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/use-a-vanilla-store-in-react).