0Pricing
Frontend Academy · Lesson

Zustand for Lightweight React State

Create a Zustand store with create(), read state with the hook, update it with actions, and enjoy a minimal API without boilerplate.

What Is Zustand?

Zustand is a minimal, fast state management library for React. The entire API surface is tiny: create a store, use a hook to read and update it. No reducers, no actions, no boilerplate.

Creating a Store

create() defines the store with state and actions as a plain object. The returned value is a hook.

import { create } from 'zustand';

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

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

All lessons in this course

  1. Redux Toolkit: createSlice and configureStore
  2. Zustand for Lightweight React State
  3. Pinia for Vue: defineStore and storeToRefs
  4. When to Use Global vs Local State
← Back to Frontend Academy