Creating a Zustand Store

Ditch the boilerplate. Create a global hook in 5 lines of code.

State Management4 min readConcept 4 of 22

What is Zustand?

Zustand (German for "state") is a fast, minimal state management library for React. While Redux requires actions, reducers, and massive boilerplate, Zustand lets you create a global store that behaves exactly like a custom React hook.

You create a store using the create function. It holds your state (data) and your actions (functions that modify the data) in one simple object.

Why ditch Context for Zustand?

1. **No Provider Hell**: Zustand stores exist *outside* the React component tree. You don't need to wrap your <App /> in a <ZustandProvider>. Any component can simply import the hook and use it.

2. **Granular Re-renders**: Unlike React Context, which forces every consumer to re-render when any property changes, Zustand allows components to "select" only the specific data they care about, eliminating unnecessary re-renders.

3. **Less Boilerplate**: No need to write createContext, useContext, or a custom Provider component just to share a single variable.

How to use `create`

You define a store by calling create. It takes a callback function that receives a set function (used to update state) and a get function (used to read current state).

The result is a custom React hook (conventionally named starting with use, like useAuthStore or useCartStore).

tsx import { create } from 'zustand'; export const useBearStore = create((set) => ({ bears: 0, increase: () => set((state) => ({ bears: state.bears + 1 })), }));

Boilerplate Comparison

Compare the amount of code required to create a global counter using React Context vs Zustand. Notice how Zustand collapses the Context, Provider, and Hook into a single clean declaration.

import { create } from 'zustand'; // 1. Define the store hook export const useBearStore = create((set) => ({ bears: 0, increase: () => set((state) => ({ bears: state.bears + 1 })), })); // 2. Use it anywhere, no Provider required function BearCounter() { constbears = useBearStore((state) => state.bears); return <h1>{bears} around here ...</h1>; }

React Context

createContext()
<Provider value=...>
useContext(Context)
Custom Provider Wrapper

Zustand

create(...)
useStore()
useStore()

Zustand creates a global store using a single function call. You just import the resulting hook directly into your components.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What React component must you use to wrap your application so a Zustand store can be accessed by child components?

Remember this

  • Zustand creates global hooks using the create function.
  • No Provider wrappers are required in your component tree.
  • State and actions are defined together in a single object.
  • Zustand solves the Context re-render trap out of the box.

Done with this concept?

Mark it complete to track your progress. No login needed.