React: What is Zustand?

Zustand is a minimalist state management library that is simpler than Redux, but more powerful than Context.

Simple analogy: Redux is like a huge office with bureaucracy (action types, reducers, dispatch, middleware). Zustand is like a notepad on the desk: wrote it — everyone saw it. Simple and fast.

Key differences from Redux:

• No action types — you just call a function.
• No reducers — you write functions directly in the store.
• No Provider — store is available from anywhere.
• TypeScript out of the box.
• No need to wrap the app in <Provider> — just import and use.

What it looks like:

1import { create } from 'zustand';
2
3// Create store
4const useStore = create((set) => ({
5    count: 0,
6    user: null,
7    
8    increment: () => set((state) => ({ count: state.count + 1 })),
9    setUser: (user) => set({ user }),
10}));
11
12// In component
13function Counter() {
14    const count = useStore((state) => state.count);
15    const increment = useStore((state) => state.increment);
16    
17    return <button onClick={increment}>{count}</button>;
18}

Additionally:

• Can create multiple isolated stores.
• Has middleware for logging, persist (save to localStorage).
• Easy to test — just call store functions.

When to choose what:

• Zustand — for medium projects (simplicity and speed).
• Redux Toolkit — for enterprise (many rules, large team).
• Context — for simple things (theme, language, authentication).