React Academy · Lesson

Creating Your First Zustand Store

Define a store with create(), add state slices and actions, and consume with useStore.

Creating Your First Zustand Store is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will create your first Zustand store with create(), define state slices and actions, and consume the store in React components.

What Is Zustand?

Zustand is a minimal, unopinionated state management library. A store is a plain JavaScript object with state and functions. Components subscribe to it via a hook. No providers, no reducers, no boilerplate.

Installation

Install Zustand. It has no peer dependencies.

npm install zustand

Creating a Store

Call create() with a function that returns the initial state and actions. The function receives a `set` helper to update state.

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Using the Store in a Component

Call the store hook in any component to access state and actions. No wrapping Provider needed.

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Selector Syntax

Pass a selector function to the store hook to subscribe to only the slice you need. The component only re-renders when the selected value changes.

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Updating State with set

The `set` function merges new values into the store shallowly. You can pass an object or a function that receives current state and returns partial updates.

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Async Actions

Actions can be async. Call set after awaiting data. There is no need for middleware — just write regular async functions.

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Nested State Updates

For nested objects, spread the outer level manually or use immer middleware for deep mutations. By default, set merges top-level keys only.

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Reading Store Outside React

Access the store state outside a component with getState() and subscribe to changes with subscribe(). Useful for testing and non-React code.

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Quick Check

In a Zustand store, what does the set function do?

Recap

Create a Zustand store with create((set) => ({ state, actions })). Use selector syntax in components to subscribe to slices. Actions call set() to update state. Works async and outside React with getState().

Up Next

Next lesson: **Selectors & Preventing Unnecessary Re-renders** — you will extract specific state slices so components only re-render when needed.

Frequently asked questions

Is the “Creating Your First Zustand Store” lesson free?

Yes — the full text of “Creating Your First Zustand Store” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Creating Your First Zustand Store”?

Define a store with create(), add state slices and actions, and consume with useStore. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Creating Your First Zustand Store” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Creating Your First Zustand Store
Selectors & Preventing Unnecessary Re-renders
Persisting State with the Persist Middleware
Zustand DevTools & Testing Stores

← Back to React Academy