Zustand — Bear-Sized State Management for React

What it is

Zustand is a lightweight state management library for React. It uses a simple hooks-based API, requires no context providers, and supports TypeScript out of the box. At under 1KB gzipped, it is one of the smallest state management solutions available.

Zustand targets React developers who want global state without the boilerplate of Redux or the complexity of context-based solutions.

How it saves time or tokens

Zustand eliminates provider wrappers, action creators, reducers, and dispatch patterns. You define a store in one function call and consume it with a hook. No selectors library, no middleware setup, no normalized state shape required.

How to use

1. Install Zustand:

npm i zustand

1. Create a store:

import { create } from 'zustand';

type BearStore = {
  bears: number;
  increase: () => void;
  reset: () => void;
};

export const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increase: () => set((s) => ({ bears: s.bears + 1 })),
  reset: () => set({ bears: 0 }),
}));

1. Use in any component — no provider needed:

function Counter() {
  const bears = useBearStore((s) => s.bears);
  const increase = useBearStore((s) => s.increase);
  return <button onClick={increase}>{bears} bears</button>;
}

Example

import { create } from 'zustand';

interface TodoStore {
  todos: string[];
  add: (todo: string) => void;
  clear: () => void;
}

const useTodoStore = create<TodoStore>((set) => ({
  todos: [],
  add: (todo) => set((s) => ({ todos: [...s.todos, todo] })),
  clear: () => set({ todos: [] }),
}));

// Use anywhere without wrapping in a Provider
function TodoList() {
  const todos = useTodoStore((s) => s.todos);
  return <ul>{todos.map((t) => <li key={t}>{t}</li>)}</ul>;
}

Related on TokRepo

• AI Tools for Coding — Frontend development tools and libraries
• Featured Workflows — Discover trending React tools

Key considerations

When evaluating Zustand for your workflow, consider the following factors. First, assess whether your team has the technical prerequisites to adopt this tool effectively. Second, evaluate the maintenance burden against the productivity gains. Third, check community activity and documentation quality to ensure long-term viability. Integration with your existing toolchain matters more than feature count alone. Start with a small pilot project before rolling out across the organization. Monitor resource usage during the initial adoption phase to identify bottlenecks early. Document your configuration decisions so team members can onboard independently.

Common pitfalls

• Selecting the entire store object (no selector function) causes unnecessary re-renders; always use selector functions.
• Zustand stores are singletons; in SSR frameworks like Next.js, use per-request store creation to avoid data leaking between users.
• Middleware (persist, devtools) must be applied at store creation time; they cannot be added later.