Zustand's `create`: A Factory for Global State Hooks

Why it exists

React's built-in state management is local to components. To share state globally, you often need complex context providers or prop drilling. Zustand's create offers a simple, unopinionated way to create a global state store accessible from anywhere without wrapping your app in providers.

The mental model

Think of create as a blueprint for a state machine. You provide the initial state (the machine's starting point) and the actions (the levers that change the state). create then builds and returns a custom React hook that lets any component read the machine's current state or pull its levers.

How it works

You call create with a "state creator" function. This function receives set and get methods. You return an object containing your state properties (e.g., bears: 0) and actions (e.g., increase: () => set(...)). The set function updates the state. By default, it performs a shallow merge, so you only need to provide the fields you're changing. For updates that depend on the previous state, pass a function to set: set(state => ({ bears: state.bears + 1 })). This ensures updates are atomic and prevents race conditions. The returned value from create is a hook you can call in your components.

When to use it

Use create to define any piece of state that needs to be shared between multiple, non-parent-child components. This is ideal for things like user authentication status, theme settings, or shopping cart contents. It's particularly useful when you want components to re-render only when a specific piece of state changes, which you achieve with selectors: const bears = useBearStore(state => state.bears).

When not to use it

For state that is truly local to a single component and its direct children, React's useState or useReducer is often simpler and more appropriate. Using Zustand for every piece of state can be overkill and might make data flow harder to trace if not organized well.

One canonical example

To create a simple counter store, you define the state and an action to increment it.

import { create } from 'zustand'
const useCounterStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))

A component then uses this hook to get the current count and the action to update it: const { count, increment } = useCounterStore()